Как поставить вертикальные линии на графике Google Scatter - PullRequest
Новая
       4

Как поставить вертикальные линии на графике Google Scatter

2 голосов
/ 10 января 2020

Как я могу сделать вертикальные линии на диаграмме рассеяния Google?

Мне нужно поставить красную линию вертикально:

enter image description here

вот мой текущий код: 

      //making array with data
      var dataArray = [];
      dataArray.push(["", "", { role: 'annotation' }, "", ""]);
      projects.forEach(function(item, index){
        dataArray.push([parseFloat(item["bottomData"]), parseFloat((item["leftData"])), index+1, 10, 15]);
      });
      var data = google.visualization.arrayToDataTable(dataArray);

      //define ticks
      var rangeX = data.getColumnRange(0);
      var ticksX = [];
      for (var i = (Math.floor(rangeX.min / 5) * 5); i <= (Math.ceil(rangeX.max / 5) * 5); i = i + 5) {
        ticksX.push(i);
      }

      var rangeY = data.getColumnRange(1);
      var ticksY = [];
      for (var i =(Math.floor(rangeY.min/5) * 5); i <= Math.ceil(rangeY.max/5) * 5; i=i+5) {
        ticksY.push(i);
      }

      //define options
      var options = {
          series: {
              1: {
                  lineWidth: 2,
                  pointSize: 0,
                  color: 'green'
              },
              2: {
                  lineWidth: 2,
                  pointSize: 0,
                  color: 'red'
              },
          },
          colors:['002060'],
          vAxis: {
              ticks: ticksY,  
          },
          hAxis: {
              ticks: ticksX,
          },
      };

      //print chart
      var chart = new google.visualization.ScatterChart(document.getElementById("chartDiv"));
      chart.draw(data, options);

Я также пытался использовать несколько осей, помещая некоторые из них с направлением = -1 или ориентацией = по вертикали, но это не работает

1 Ответ

1 голос
/ 10 января 2020

чтобы смешать ряды линий с разбросом,
вам нужно будет использовать ComboChart

, а для получения вертикальных линий,
вам нужно будет добавить несколько строк с одинаковым x значение оси,
со значениями для минимальной и максимальной значений оси y.

в опциях установите seriesType на 'scatter'
и измените тип серии на 'line'

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
    packages:['corechart']
}).then(function () {
    var data = google.visualization.arrayToDataTable([
        ['x', 'y0', {role: 'annotation', type: 'number'}],
        [26, 1, 1],
        [33, 5, 2],
        [36, 1, 3],
        [38, 6, 4],
        [58, 1, 5]
    ]);

    var ticksX = [25, 30, 35, 40, 45, 50, 55, 60];
    var ticksY = [0, 5, 10, 15, 20, 25];

    data.addColumn('number', 'y1');
    data.addColumn('number', 'y2');

    //red line (vertical)
    ticksY.forEach(function (value) {
      data.addRow([40, null, null, null, value]);
    });

    //green line (horizontal)
    ticksX.forEach(function (value) {
      data.addRow([value, null, null, 10, null]);
    });

    data.sort([{column: 0}]);

    var options = {
        interpolateNulls: true,
        seriesType: 'scatter',
        series: {
            1: {
                color: 'green',
                type: 'line'                
            },
            2: {
                color: 'red',
                type: 'line'
            },
        },
        colors:['002060'],
        vAxis: {
            ticks: ticksY
        },
        hAxis: {
            ticks: ticksX
        },
    };

    var chart = new google.visualization.ComboChart(document.getElementById("chartDiv"));
    chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartDiv"></div>
...