Google Charts / visualisations column width

2019-04-26 16:16发布

问题:

I am using the Google Chart API, and converted a line chart (see below) into a column chart, however the column widths change depending on the quantity of data columns. If I hover over, it tells me the correct date, however because of the changing width of the column you cannot actually accurately see the date the column should represent. A point would work, so I could revert to a line chart however, a column does look better for the data set I am using. Any idea how to solve this issue?

Date is dynamic, so the X axis has to be variable.

Thanks

// Create a line chart, passing some options
                var LineChart = new google.visualization.ChartWrapper({
                    'chartType': 'ColumnChart',
                    'containerId': 'chart_div',
                    'options': {
                        'vAxis': {'title': 'Species Abundance', 'minValue': 0, 'maxValue': 32},
                        'width': 300,
                        'height': 300,
                        'legend': 'top',           
                        'title': 'Selected Site and Species abundance over time'
                    },
                    'view': {'columns': [0, 1]},
                });

回答1:

You can set a maximum width by setting the bar.groupWidth option to an integer number (the number of pixels to use for a bar group). Setting this option makes the API attempt to draw all bar groups (the set of bars at a given axis value) this width, though it may be forced to draw them smaller if the setup of the chart requires it.

bar: {
    groupWidth: 20
}