Как добавить вертикальные полосы в комбинированную диаграмму (линия + линейка) с помощью диаграмм Google для разработчиков
Мне нужно создать линейную диаграмму с вертикальными полосами на заднем плане и вертикальной линией в указанной позиции. Ниже приведено примерное изображение диаграммы.
Образец диаграммы
Я попытался создать комбинированный график с линией и линейкой в качестве моей серии, чтобы получить синюю линию и красную вертикальную линию. Но я не могу понять, как получить вертикальные полосы. Гистограмма не поддерживается комбинированной диаграммой. Также нет возможности создавать гистограммы с переменной шириной каждой гистограммы. Вот что я могу создать до сих пор:
график, созданный до сих пор
Ниже приведен мой код:
function drawChart() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Percentile', 'Number of students', 'Vertical lines',{ role: 'style' }],
[1, 0.2020202,,''],
[3, 0.546875,,''],
[10, 1.20967742,,''],
[25, 1.87969925,,''],
[50, 1.953125, ,''],
[75, 1.32743363,,''],
[90, 0.64814815, ,''],
[97, 0.25316456, ,''],
[99, 0.00621891,,''],
[78, ,20,'stroke-width: 2; fill-color: red']
]);
var options = {
vAxis: {
gridlines:{count: 6},
viewWindow:{ max: 2.5}
},
hAxis: {
ticks: [0,20,40,60,80,100,120]
},
seriesType: 'line',
series: {1: {type: 'bars'}},
bar:{groupWidth:2},
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
curveType: 'function',
legend: { position: 'none' },
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ComboChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
Пожалуйста, предложите, как можно достичь этих вертикальных полос?