没有简单的方法可以做到完全相同的事情,但是您可以稍微作弊并得到类似的东西(您可以根据需要进行自定义以进一步微调):
基本上,我制作了一个包含 6 个不同系列的堆积条形图。
- 假人(透明)系列
- 黑线(因此误差线正确显示)
- (以及 4、5、6)范围为灰色、红色、黄色、绿色
虚拟系列是透明的,并设置第一个条形在图表中显示的位置。黑线系列始终为 0,并且其上有从 0 到 100 的误差条(下面的间隔列)。其他代表数据。
手动执行此操作有点复杂,但您可以创建一个 JavaScript 函数,在给定单个值的情况下将数字适当地分配到各个系列。我只是输入任意值。
可以优化颜色和透明度,也可以优化每个条的“高度”以使其看起来相似。轴基线和网格线可以隐藏以使其看起来更好。图例也可以隐藏。我并没有做那些认为你会摆弄代码的事情。
这是代码:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Dummy');
data.addColumn('number', 'Black for Lines');
data.addColumn({type: 'number', role: 'interval'});
data.addColumn({type: 'number', role: 'interval'});
data.addColumn('number', 'Grey');
data.addColumn('number', 'Red');
data.addColumn('number', 'Yellow');
data.addColumn('number', 'Green');
data.addRows([
['Target', 65, 0, 0, 100, 15, 00, 00, 00],
['Test A', 85, 0, 0, 100, 00, 00, 00, 15],
['Test B', 70, 0, 0, 100, 10, 00, 05, 00],
['Test C', 10, 0, 0, 100, 00, 15, 00, 00],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{isStacked: true,
width:600, height:400,
series: [{color: 'transparent'}, {color: 'black'}, {color: 'grey'}, {color: 'red'}, {color: 'yellow'}, {color: 'green'}]
}
);
}