Как добавить вертикальные полосы в комбинированную диаграмму (линия + линейка) с помощью диаграмм 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>

Пожалуйста, предложите, как можно достичь этих вертикальных полос?

0 ответов

Другие вопросы по тегам