php - 删除 Google Charts 水平柱形图上方和下方的空白

Question

我使用水平柱形图显示来自 Google Charts 的图表。我想删除图表上方和下方的空白区域。

这里是调用的代码(由于保密协议(protocol)删除了一些信息):

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        [null, "...","...","...","...","...","...","...","...","Total Average"],
        [null, 100,100,100,100,100,88.89,100,100,98.70]
    ]);

    var options = {
        height: 540,
        title: 'Title here',
        vAxis: { textPosition: 'none', viewWindowMode: 'maximized' },
        colors:["#0B0842","#ADAEAE","#BE3351","#498101","#0D80CA","#A3C116","#91A96B","#E8F72B","#424242"],
        hAxis: { textPosition: 'none', minValue: 0, maxValue: 100 },
        chartArea: { left: 0, width: "78%" },
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

Answer 1

当您有多行数据时，条形上方和下方的空间通常用于分隔条形组。如果您不想要该空间，则可以将图表中的 bar.groupWidth 选项设置为更大的百分比(最高 100%；默认为黄金比例，大约 61.8%):

var options = {
    height: 540,
    title: 'Title here',
    vAxis: { textPosition: 'none', viewWindowMode: 'maximized' },
    colors:["#0B0842","#ADAEAE","#BE3351","#498101","#0D80CA","#A3C116","#91A96B","#E8F72B","#424242"],
    hAxis: { textPosition: 'none', minValue: 0, maxValue: 100 },
    chartArea: { left: 0, width: "78%" },
    bar: {groupWidth: '100%'}
};