Charts 如何在谷歌散点图上放置垂直线

如何在谷歌散点图上画垂直线

我需要将红线垂直放置：

这是我目前的代码：

      //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);

//使用数据生成数组
var dataArray=[]；
push（[“”，“”，{role:'annotation'}，“，”“]）；
projects.forEach（功能（项目、索引）{
push（[parseFloat（item[“bottomData”]）、parseFloat（（item[“leftData”]）、index+1、10、15]）；
});
var data=google.visualization.arrayToDataTable（dataArray）；
//定义记号
var rangeX=data.getColumnRange（0）；
var ticksX=[]；
对于（var i=（数学地板（rangeX.min/5）*5）；i为了将线序列与散点混合，

您需要使用组合图

要获得垂直线，

您需要添加具有相同x轴值的多行，

具有最小和最大y轴值的值

在选项中，将
序列类型设置为
'scatter'


并将序列类型更改为
“行”

请参阅以下工作片段


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
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'）；
//红线（垂直）
ticksY.forEach（函数（值）{
data.addRow（[40，null，null，null，value]）；
});
//绿线（水平）
ticksX.forEach（函数（值）{
addRow（[value，null，null，10，null]）；
});
data.sort（[{column:0}]）；
变量选项={
是的，
序列类型：“散布”，
系列：{
1: {
颜色：“绿色”，
类型：“行”
},
2: {
颜色：“红色”，
类型：“行”
},
},
颜色：['002060']，
言辞：{
滴答声：痒
},
哈克斯：{
滴答声：滴答声
},
};
var chart=新的google.visualization.ComboChart（document.getElementById（“chartDiv”）；
图表绘制（数据、选项）；
})；

这非常有效，但我正在尝试返回水平绿线，即使我正确地放置了点，它们也不会作为一条线聚集在一起，我使用以下代码：
//红线（垂直）ticksY.forEach（函数（值）{data.addRow（[40，null，null，null，value]）；}；//绿线（水平）ticksX.forEach（函数（value）{data.addRow（[value，null，null，10，null]）；}）；
在水平线上，因为序列的值不存在于每一行上，所以您需要添加选项-->
interpolateNulls:true
--请参阅上面的更改答案。。。