Google диаграммы: настройка базовой линии оси h В столбчатых диаграммах - PullRequest
Новая
       22

Google диаграммы: настройка базовой линии оси h В столбчатых диаграммах

1 голос
/ 18 июня 2019

В моем случае я хочу показать некоторую метку индикации на базовой линии оси h или оси y.пожалуйста, проверьте изображение для лучшего понимания.

На изображении мы показываем значения тиков [0,10,20,30,40].Таким образом, для каждого значения нам нужно показать маленькую линию на базовой линии оси h.

Я могу показать базовую линию на оси h, но не могу получить маленькую линию на базовой линии оси h

Пожалуйста, помогите мне решить эту проблему. imageenter image description here">

  barTitle = 'Occupancy';
barType = 'ColumnChart';
barData = [
  [{v: 0, f:''}, 0,0,0,0],
   [{v:1,f:'SUN'}, 5,8,10,12],
   [{v:2,f:"MON"}, 6,4,14,10],
   [{v:3,f:"TUE"}, 13,10,3,9],
   [{v:4,f:"WED"}, 10,16,8,6],
   [{v:5,f:"THU"}, 16,9,8,6],
   [{v:6,f:"FRI"}, 5,5,10,14],
   [{v:7,f:"SAT"}, 9,12,4,11]
];
barColumnNames = ['DAY', 'Regular','Compact','Electric','ADA'];
barOptions = { 
  hAxis:{
    title:'DAY',
   titlePosition:'in',

    ticks:[
    {v: 0, f:''},
    {v:1,f:'SUN'}, 
   {v:2,f:"MON"},
   {v:3,f:"TUE"},
   {v:4,f:"WED"},
   {v:5,f:"THU"},
   {v:6,f:"FRI"},
   {v:7,f:"SAT"}
  ]
  },
 vAxis: {

gridlines: {
  color: 'none'
},

ticks: [0, .25, .50, .75, 1],
baselineColor:'#00ff00',

  },
  isStacked:"percent",
  width:550,
  height:300,
  bar:{groupWidth:"25%"},
  legend:{position:"none"},
  series:{

    0:{color:'rgb(185,2,118)'},
    1:{color:'rgb(82,95,107)'},
    2:{color:'rgb(0,142,207)'}
  },


};

1 Ответ

0 голосов
/ 18 июня 2019

Нет встроенных опций для отображения маленькой индикаторной линии на оси.

, но вы можете нарисовать свое собственное событие 'ready' на графике
см. следующий рабочий фрагмент ...

здесь мы используем методы диаграммы getChartLayoutInterface & getBoundingBox, чтобы найти расположение линий ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  barTitle = 'Occupancy';
  barType = 'ColumnChart';
  barData = [
    [{v: 0, f:''}, 0,0,0,0],
    [{v:1,f:'SUN'}, 5,8,10,12],
    [{v:2,f:"MON"}, 6,4,14,10],
    [{v:3,f:"TUE"}, 13,10,3,9],
    [{v:4,f:"WED"}, 10,16,8,6],
    [{v:5,f:"THU"}, 16,9,8,6],
    [{v:6,f:"FRI"}, 5,5,10,14],
    [{v:7,f:"SAT"}, 9,12,4,11]
  ];
  barColumnNames = ['DAY', 'Regular','Compact','Electric','ADA'];
  barOptions = {
    hAxis:{
      title:'DAY',
      titlePosition:'in',
      ticks:[
        {v: 0, f:''},
        {v:1,f:'SUN'},
        {v:2,f:"MON"},
        {v:3,f:"TUE"},
        {v:4,f:"WED"},
        {v:5,f:"THU"},
        {v:6,f:"FRI"},
        {v:7,f:"SAT"}
      ]
    },
    vAxis: {
      gridlines: {
        color: 'none'
      },
      ticks: [0, .25, .50, .75, 1],
      baselineColor:'#00ff00',
    },
    isStacked:"percent",
    width:550,
    height:300,
    bar:{groupWidth:"25%"},
    legend:{position:"none"},
    series:{
      0:{color:'rgb(185,2,118)'},
      1:{color:'rgb(82,95,107)'},
      2:{color:'rgb(0,142,207)'}
    },
  };

  barData.splice(0, 0, barColumnNames);
  var dataTable = google.visualization.arrayToDataTable(barData);
  var container = document.getElementById('chart_div');
  var chart = new google.visualization[barType](container);
  google.visualization.events.addListener(chart, 'ready', function () {
    // init variables
    var svg = container.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;
    var chartLayout = chart.getChartLayoutInterface();
    var baseBounds = chartLayout.getBoundingBox('hAxis#0#baseline');

    // add tick lines
    var tickWidth = 10;
    barOptions.vAxis.ticks.forEach(function (tick, index) {
      // ignore baseline
      if (index === 0) {
        return;
      }

      // add axis tick
      var tickBounds = chartLayout.getBoundingBox('vAxis#0#label#' + index);
      var tickLine = svg.appendChild(document.createElementNS(svgNS, 'rect'));
      tickLine.setAttribute('x', (baseBounds.left - tickWidth));
      tickLine.setAttribute('y', tickBounds.top + (tickBounds.height / 2));
      tickLine.setAttribute('width', tickWidth);
      tickLine.setAttribute('height', 1);
      tickLine.setAttribute('stroke', 'none');
      tickLine.setAttribute('stroke-width', 0);
      tickLine.setAttribute('fill', '#333333');
    });
  });
  chart.draw(dataTable, barOptions);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...