Question

如果图表值为空（或0），如何删除图表上的空白？

参见示例：

你可以在＆＃34; 10月21日星期一＆＃34;看到空白空间。如何消除白色间隙？

  google.load("visualization", "1.1", {packages:["bar"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Day', 'BMW', 'Ford', 'Toyota'],
      ['Mon 19 Oct', 4, 8, 3],
      ['Mon 20 Oct', 11, 4, 7],
      ['Mon 21 Oct', 6, null,6],
      ['Mon 22 Oct', 10, 5,2]
    ]);

    var options = {
      chart: {
        title: 'Statistics',
        subtitle: 'Car',
      },
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, options);

Answer 1

似乎不支持此功能，但您可以考虑使用以下解决方案来删除条形组中的空白间隙。我们的想法是移动组中剩余的条形以填补它们之间的空白。

注意：每个条形图都在Google Chart中呈现为path元素。在提供的示例支持填补组的空白由3个酒吧组成。

＆＃13;

google.load("visualization", "1.1", { packages: ["bar"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Day', 'BMW', 'Ford', 'Toyota'],
      ['Mon 19 Oct', 6, null, 8],
      ['Mon 20 Oct', 11, 5, 7],
      ['Mon 21 Oct', 6, 6,null],
      ['Mon 22 Oct', 4, 5, 2]
    ]);

    

    var options = {
        chart: {
            title: 'Statistics',
            subtitle: 'Car',
        },
    };
    
    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
    google.visualization.events.addListener(chart, 'ready', function () {
        configureBarOptions(chart,data);
    });
    chart.draw(data, options);
}


function configureBarOptions(chart,data){
    
    var chartDiv = chart.getContainer();
    var bars = chartDiv.getElementsByTagName('path');
    if(bars.length == 0)
      return;


    var w = bars[0].getBoundingClientRect().width;
    var numOfEmptyBars = 0;
    forEach(data,function(row,col,val){
          if(val == null || val == 0){
               var pos = ((data.getNumberOfColumns() - 1) * row) + col - 1 - numOfEmptyBars; 
               if(col == 1) { /* first empty bar in group? */
                  bars[pos].setAttribute('transform', 'translate(-' + w/2 + ', 0)');
                  bars[pos+1].setAttribute('transform', 'translate(-' + w/2 + ', 0)'); 
                  numOfEmptyBars++;
               } 
               else if (col == 2) { /* middle empty bar in group? */
                  bars[pos-1].setAttribute('transform', 'translate(' + w/2 + ', 0)');
                  bars[pos].setAttribute('transform', 'translate(-' + w/2 + ', 0)');
                  numOfEmptyBars++;
               }  
               else { /*last empty bar in series? */
                  bars[pos-1].setAttribute('transform', 'translate(' + w/2 + ', 0)');
                  bars[pos-2].setAttribute('transform', 'translate(' + w/2 + ', 0)');
                  numOfEmptyBars++;
               }
          }
    });
    


    
}


function forEach(data,func){
    for(var i = 0; i < data.getNumberOfRows(); i++){
        for(var j = 0; j < data.getNumberOfColumns(); j++){
            var val = data.getValue(i,j);   
            func(i,j,val);
        }
    }
}

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>

＆＃13;

如果Value为null，如何隐藏栏？

1 个答案: