我正在使用Google Stack Chart生成我的报告。样本Fiddle。
这里的问题是我需要图表中每个系列的分隔线。 我尝试了下面的代码:
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0,1,2, {"type": "string","role": "style","calc": ReturnStroke}, 3, {
"type": "string",
"role": "style",
"calc": ReturnStroke
}, 4, {
"type": "string",
"role": "style",
"calc": ReturnStroke
}, 5, {
"type": "string",
"role": "style",
"calc": ReturnStroke
},6,7
]);
function ReturnStroke(dataTable, rowNum) {
return 'stroke-color: #99ebff;';
}
chart.draw(dataView, options);
这对我有用。但问题是,它是在条形图的四边绘制边框线,但我只需要在顶部。这也只是我提供的示例数据。实际上我的图表中有大约500列。如上所述,手动指定它们是不切实际的。
有没有简单的方法在图表级别全局指定分隔线。
不确定如何改变四边的击球, 但您可以动态构建视图列
但是,颜色和笔划的样式需要组合成一个样式列 将上面发布的代码添加到小提琴中, 笔触样式会覆盖数据表中设置的颜色样式
这是一个如何动态构建视图列的示例...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Machine', '', '', '', '', ''],
[0.5, null, null, null, null, 0.067],
[1, 0.05, 0.0775, 0.069, 0.05, 0.067],
[2, 0.05, 0.0775, 0.069, 0.05, 0.067],
[2.5, null, null, null, null, 0.067]
]);
var min = data.getColumnRange(0).min;
var max = data.getColumnRange(0).max;
var options = {
width: 500,
height: 500,
legend: {
position: 'none',
maxLines: 6,
textStyle: {
color: 'black',
fontSize: 10
}
},
isStacked: true,
seriesType: 'bars',
series: {
4: {
type: "line",
color: '#FF0000',
visibleInLegend: false
}
},
vAxis: {
baseline: 0,
},
hAxis: {
ticks: [{
"v": 1,
"f": "M1"
}, {
"v": 2,
"f": "M2"
}],
viewWindow: {
min: min,
max: max
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
var dataView = new google.visualization.DataView(data);
var colors = {
'1': ['#808080', '#C71585', '#FFC0CB', 'Blue'],
'2': ['Yellow', 'Pink', '#808080', 'Green']
};
var viewColumns = [];
for (var col = 0; col < data.getNumberOfColumns(); col++) {
addColumn(col);
}
function addColumn(col) {
viewColumns.push(col);
if (col > 0) {
viewColumns.push({
type: 'string',
role: 'style',
calc: function (dt, row) {
var style = null;
if ((row > 0) && (row < dt.getNumberOfRows() - 1)) {
style = 'fill-color: ' + colors[dt.getFormattedValue(row, 0)][col - 1] + ';';
if ((col > 1) && (col < dt.getNumberOfColumns() - 2)) {
style += ' stroke-color: #99ebff;';
}
}
return style;
}
});
}
}
dataView.setColumns(viewColumns);
chart.draw(dataView, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>