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

Question

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

以下是调用的代码（由于NDA而删除了一些信息）：

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%'}
};

Answer 2

尝试一下，它对我有用：

    var chart_height = data.getNumberOfRows() * 40;
    var options = {
        chartArea: {
            top: 0,
            left: '30%',
            width: '70%',
            bottom: 0
        },
        height: chart_height
    };