Charts 如果值为空，如何隐藏条形图？

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

见示例：

你可以在“10月21日星期一”上看到空位。如何消除白色间隙

  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);

---

似乎不支持这个功能，但是可以考虑以下解决方案来删除条形组中的空白。 这样做的目的是移动组中剩余的条，以填补它们之间的间隙

注意：每个条形图在Google图表中都作为

路径

元素呈现。在里面 所提供的示例支持它来填补组的空白 由3根钢筋组成

google.load（“可视化”、“1.1”、{packages:[“bar”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“日”、“宝马”、“福特”、“丰田”]，
[‘10月19日星期一’、6、空、8]，
[‘10月20日星期一’、11、5、7]，
[‘10月21日星期一’、6、6、空]，
[‘10月22日星期一’、4、5、2]
]);
变量选项={
图表：{
标题:"统计",，
副标题:"汽车",，
},
};
var chart=new google.charts.Bar（document.getElementById（'columnchart_material'）；
google.visualization.events.addListener（图表'ready'，函数（）{
配置气压选项（图表、数据）；
});
图表绘制（数据、选项）；
}
功能配置选项（图表、数据）{
var chartDiv=chart.getContainer（）；
var bar=chartDiv.getElementsByTagName（'path'）；
if（bar.length==0）
返回；
var w=条[0]。getBoundingClientRect（）.width；
var numOfEmptyBars=0；
forEach（数据、函数（行、列、值）{
如果（val==null | | val==0）{
var pos=（（data.getNumberOfColumns（）-1）*行）+col-1-numOfEmptyBars；
如果（col==1）{/*组中的第一个空条*/
条形图[pos].setAttribute（'transform'，'translate（-'+w/2+'，0'）；
条形图[pos+1].setAttribute（'transform'，'translate（-'+w/2+'，0'）；
numOfEmptyBars++；
} 
如果（col==2）{/*组中的中间空条，则为else*/
条形图[pos-1].setAttribute（'transform'，'translate（'w/2+'，0'）；
条形图[pos].setAttribute（'transform'，'translate（-'+w/2+'，0'）；
numOfEmptyBars++；
}  
else{/*序列中的最后一个空条*/
条形图[pos-1].setAttribute（'transform'，'translate（'w/2+'，0'）；
条[pos-2].setAttribute（'transform'，'translate（'w/2+'，0'）；
numOfEmptyBars++；
}
}
});
}
函数forEach（数据，func）{
对于（var i=0；i

 > p>看起来这个特性不受支持，但是你可以考虑下面的解决方案来删除条形组中的空白。
这样做的目的是移动组中剩余的条，以填补它们之间的间隙

注意：每个条形图在Google图表中都作为
路径
元素呈现。在里面
所提供的示例支持它来填补组的空白
由3根钢筋组成


google.load（“可视化”、“1.1”、{packages:[“bar”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“日”、“宝马”、“福特”、“丰田”]，
[‘10月19日星期一’、6、空、8]，
[‘10月20日星期一’、11、5、7]，
[‘10月21日星期一’、6、6、空]，
[‘10月22日星期一’、4、5、2]
]);
变量选项={
图表：{
标题:"统计",，
副标题:"汽车",，
},
};
var chart=new google.charts.Bar（document.getElementById（'columnchart_material'）；
google.visualization.events.addListener（图表'ready'，函数（）{
配置气压选项（图表、数据）；
});
图表绘制（数据、选项）；
}
功能配置选项（图表、数据）{
var chartDiv=chart.getContainer（）；
var bar=chartDiv.getElementsByTagName（'path'）；
if（bar.length==0）
返回；
var w=条[0]。getBoundingClientRect（）.width；
var numOfEmptyBars=0；
forEach（数据、函数（行、列、值）{
如果（val==null | | val==0）{
var pos=（（data.getNumberOfColumns（）-1）*行）+col-1-numOfEmptyBars；
如果（col==1）{/*组中的第一个空条*/
条形图[pos].setAttribute（'transform'，'translate（-'+w/2+'，0'）；
条形图[pos+1].setAttribute（'transform'，'translate（-'+w/2+'，0'）；
numOfEmptyBars++；
} 
如果（col==2）{/*组中的中间空条，则为else*/
条形图[pos-1].setAttribute（'transform'，'translate（'w/2+'，0'）；
条形图[pos].setAttribute（'transform'，'translate（-'+w/2+'，0'）；
numOfEmptyBars++；
}  
else{/*序列中的最后一个空条*/
条形图[pos-1].setAttribute（'transform'，'translate（'w/2+'，0'）；
条[pos-2].setAttribute（'transform'，'translate（'w/2+'，0'）；
numOfEmptyBars++；
}
}
});
}
函数forEach（数据，func）{
对于（var i=0；i