我想在 Google Visualization ColumnChart 中的每两列之间添加一个更大的空间，并且一直在使用 bar groupWidth 属性来实现这一点，下面的代码显示了这一点：
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart', 'controls', 'charteditor']
}).then(function () {
var data = google.visualization.arrayToDataTable([@Html.Raw(ViewBag.ChartOutput)]);
var width = Math.min(document.documentElement.clientWidth, window.innerWidth || 0) + 'px';
// define bars series colors
var colors = ["#FF9900", "#FF6400", "#FF0000", "#9A0033"];
var lineColors = ['#4422EE', '#0F1657'];
// define filter columns
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'Series #');
columnsTable.addColumn('string', 'Select series: ');
var initState = { selectedValues: [] };
for (var i = 1; i < data.getNumberOfColumns(); i++) {
var colIndex = columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
// assign series type, axis, and color -- store using row properties
switch (data.getColumnLabel(i)) {
case 'Baseline - Acute':
case 'Baseline - Risk':
case 'Baseline - Any':
case 'Review - Acute':
case 'Review - Risk':
case 'Review - Any':
columnsTable.setRowProperty(colIndex, 'type', 'bars');
columnsTable.setRowProperty(colIndex, 'targetAxisIndex', 0);
columnsTable.setRowProperty(colIndex, 'color', colors[colIndex]);
break;
}
}
// define chart
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
// define filter
var filter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'filter_div',
dataTable: columnsTable,
options: {
filterColumnIndex: 1,
ui: {
caption: 'Series',
sortValues: false
}
},
state: initState
});
// draw chart when filter is ready or changed
google.visualization.events.addListener(filter, 'ready', drawChart);
google.visualization.events.addListener(filter, 'statechange', drawChart);
// draw filter
filter.draw();
// draw chart
function drawChart() {
var options = {
hAxis: {
slantedText: true,
slantedTextAngle: 30,
title: 'Reporting Period'
},
vAxes: {
0: { logScale: false, title: '@Model.XAxis', minValue: 0 }
},
series: {},
chartArea: {
top: 40,
left: 100,
width: '80%'
},
pointSize: 5,
legend: { position: 'top' },
width: width,
height: '300px',
colors: lineColors,
lineWidth: 3.5
};
// define data view column and series options based on filter columns
var viewColumns = [0];
var state = filter.getState().selectedValues;
state.forEach(function (column, index) {
var colIndex;
// find filter column index
for (var i = 0; i < columnsTable.getNumberOfRows(); i++) {
if (columnsTable.getValue(i, 1) === column) {
colIndex = i;
}
}
viewColumns.push(colIndex + 1);
// define series option
options.series[index] = {
type: columnsTable.getRowProperty(colIndex, 'type'),
targetAxisIndex: columnsTable.getRowProperty(colIndex, 'targetAxisIndex')
};
if (colIndex < 6) {
options.series[index].color = columnsTable.getRowProperty(colIndex, 'color');
if (colIndex % 2 === 0) {
options.series[index] = { bar: {groupWidth: '100%'}}
}
}
});
// define data view
var dataView = new google.visualization.DataView(data);
dataView.setColumns(viewColumns);
// ensure enough columns selected to draw chart
if (viewColumns.length > 1) {
chart.draw(dataView, options);
} else {
chart.clearChart();
}
}
var chart1 = "done";
$(window).resize(function() {
if(chart1 === "done"){
chart1 = "waiting";
setTimeout(function(){drawChart();chart1 = "done"},0);
}
});
});
</script>
以下是我用来执行此操作的 javascript 部分：
if (colIndex < 6) {
options.series[index].color = columnsTable.getRowProperty(colIndex, 'color');
if (colIndex % 2 === 0) {
options.series[index] = { bar: {groupWidth: '100%'}}
}
到目前为止，设置对当前看起来像这样的 ColumnChart 的呈现没有影响：
如何修改代码以实现上图中显示的 ColumnChart 的所需样式可能需要每组两列之间的列宽？
完成的样式应模拟 2015/16 年所有报告期间的列，如下图所示：
我在 JSFiddle 中提供了一个输出的工作示例：