如何在散点图上绘制垂直线?
我需要垂直放置红线:
这是我当前的代码:
//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或方向=垂直的轴放置,但它不起作用
为了将行系列与散点图混合,您将需要使用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>