如何在Google图表散点图上放置垂直线

Question

如何在散点图上绘制垂直线？

我需要垂直放置红线：

这是我当前的代码：

      //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或方向=垂直的轴放置，但它不起作用

Answer 1

为了将行系列与散点图混合，您将需要使用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>