如何在谷歌组合图表中调整列宽

Question

如何在Google组合图表上调整列宽？下面是我的代码，但我无法弄清楚如何设置列宽。根据我输入的数据，api使列的宽度不同。我喜欢他们所有10px。我一直在尝试使用 bar.groupWidth 来设置，但不能。有什么想法吗？

<script type="text/javascript">

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

google.setOnLoadCallback(drawChart);

function getValueAt(column, dataTable, row) {
    return dataTable.getFormattedValue(row, column);
}

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Time', 'Boluses', 'Total Volume', '30 mL/kg', { role: 'annotation' }], [0,0,0,1769.1, null],[9, 500, 500, 1769.1, null],[29, 250, 750, 1769.1, null],[44, 250, 1000, 1769.1, null],[114, 2000, 3000, 1769.1, null],[238, 0, 3000, 1769.1, null],[238, 0, 3000, 1769.1, null],[288, 85, 3085, 1769.1, null],[288, 6.8, 3091.8, 1769.1, null],[348, 100, 3191.8, 1769.1, null],[348, 8, 3199.8, 1769.1, null],[408, 100, 3299.8, 1769.1, null],[408, 8, 3307.8, 1769.1, null],[360, 0, 3307.8, 1769.1, null]
    ]);

    var view = new google.visualization.DataView(data);

    var options = {
        title: 'sepsis treatment summary',
        fontName: 'Lato', 
        titleTextStyle: {fontSize: 18},
        annotation: {},
        vAxis: {title: 'total fluids received (mL)', minValue: 0, gridlines: {count: 6}},
        hAxis: {title: 'time after alert (minutes)', viewWindow: {min: 0, max: 360}, gridlines: {count: 6}},
        seriesType: "bars",
            series: { 
                1: {color: '#99CCFF', type: "area"},
                2: {color: 'red', type: "line", lineDashStyle: [10, 2]},
                3: {role: "annotation"}
            },
        annotations: {style: 'line'},
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

    chart.draw(view, options);

}

此代码创建以下图表：

Answer 1

API计算每个条形图组的最大宽度：

var chartWidth, // chart area width in pixels
    axisRange, // axis max value - axis min value
    data, // DataTable, assume axis values are in column 0 for this exercise, and that data is sorted ascending
    minSeparation = axisRange, // will hold the minimum separation between daat points
    barGroupWidth;
// calculate the minimum distance between any two adjacent points
for (var i = 1; i < data.getNumberOfRows(); i++) {
    if (data.getValue(i, 0) - data.getValue(i - 1, 0) < minSeparation) {
        minSeparation = data.getValue(i, 0) - data.getValue(i - 1, 0);
    }
}
// calculate the maximum width of a bar group
barGroupWidth = chartWidth * minSeparation / axisRange;

请注意，此功能是基于我能够进行逆向工程的API所做的粗略近似。

因此，如果图表区域的图表区域为300像素宽，轴范围为100，相邻点之间的最小间距为10，则最大条形图组宽度将为30像素。如果您尝试将条形图组宽度设置为高于此值，则将忽略您的设置。

在您的情况下，您的相邻点的间隔为0（第5行和第6行，第7行和第8行，第9行和第10行，第11行和第11行），这将导致粗略近似条形图组宽度为0。实际的算法更慷慨，可能会给你1个像素宽的组。没有任何设置可以更改以使条形组更宽，您唯一的办法是将数据集更改为空格中的值。这可能并不容易，但我建议首先考虑使用不同的值同时拥有两个事件意味着什么，以及如何以不同的方式表示它们。