Как отобразить небольшую полосу, даже если в Google Charts значение равно нулю? - PullRequest
Новая
       14

Как отобразить небольшую полосу, даже если в Google Charts значение равно нулю?

0 голосов
/ 23 января 2019

У меня иногда есть серии, где все значения равны нулю. Когда я применяю ColumnChart, на рисунке все пусто, не показывая, что на самом деле есть нулевые значения.

Как я могу отображать бары, даже если значения равны нулю?

Я попробовал следующие варианты: 

{
     type: options.type,
     cssStyle: options.cssStyle,
     data: {},
     options: {
                chartArea:{width:'80%'},
                pointsVisible: true,
                lineWidth: 4,
                curveType: "none",
                fontName: "Open Sans",
                fontSize: 10,
                colors: options.colors,
                isStacked: "false",
                fill: 10,
                displayExactValues: true,
                vAxis: {viewWindowMode:'explicit', minValue: -1, viewWindow: {min:0}, gridlines: {"color": "#f2f2f2", "count": 2}, baselineColor: "#f2f2f2", textStyle: options.textStyle},
                hAxis: {gridlines: {"color": "#f2f2f2"}, baselineColor: "#f2f2f2", textStyle: options.textStyle},
                legend: {position: 'bottom', alignment: 'center', textStyle: options.textStyle},
}

Ответы [ 2 ]

0 голосов
/ 23 января 2019

В вашем коде проверьте нулевые значения и преобразуйте их в .1 или в любое другое, подходящее для вашей шкалы. 

function vAxisTest (vAxis) {
   let scale = .1; //
   if(vAxis === 0) { 
       vAxis = scale;
       return scale;
   }
  else { return vAxis; }
}
0 голосов
/ 23 января 2019

бар будет отображаться, только если значение не равно нулю

однако, используя обозначение объекта, мы можем предоставить значение (v:) и отформатированное значение (f:)

, используя следующую строку, появится панель, но при наведении подсказка показывает значение ноль 

{v: 0.1, f: '0'}

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    ['A', {v: 0.1, f: '0'}],
    ['B', 2],
    ['C', 3],
    ['D', 4]
  ]);

  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: 0, column: 1}]);
  });

  chart.draw(data, {
    tooltip: {
      trigger: 'both'
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...