我正在为我的应用程序使用散点图,因此我选择了散点图的google API。对于我的应用程序,我需要用线标记连接一些点。我关注了this
测试链接。请帮助我改善。
最佳答案
如果需要连接ScatterChart上的点,可以通过设置lineWidth
选项(为所有数据系列创建连接点的线)或series.<series index>.lineWidth
选项(其创建连接单个系列的点的线)来实现。这里有些例子:
使用lineWidth
选项连接所有系列中的点(jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[1, 6, 6],
[2, 5, 9],
[3, 6, 5],
[4, 5, 4],
[7, 9, 2],
[8, 4, 6],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
lineWidth: 1
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
使用
series.<series index>.lineWidth
选项(jsfiddle example)连接一个数据系列中的所有点:function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[1, 6, 6],
[2, 5, 9],
[3, 6, 5],
[4, 5, 4],
[7, 9, 2],
[8, 4, 6],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
如果只想连接数据系列中的某些点,则必须在不希望连接线的所有点之间插入空值。这是连接Y1系列(jsfiddle example)中的(2,5)和(3,6)点的示例:
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[null, null, null],
[1, 6, 6],
[null, null, null],
[2, 5, 9],
[3, 6, 5],
[null, null, null],
[4, 5, 4],
[null, null, null],
[7, 9, 2],
[null, null, null],
[8, 4, 6],
[null, null, null],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
这里要注意的重要一点是,数据表中相邻的点将用线连接。如果要连接图表中不相邻的点,则需要重新排列数据。这是一个连接Y1中的点(2,5)和(8,4)以及Y2(jsfiddle example)中的点(4,4)和(8,6)的示例:
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[null, null, null],
// Y1 data
// make (2, 5) and (8, 4) adjacent in the DataTable
[2, 5, null],
[8, 4, null],
// split all others with nulls
[null, null, null],
[0, 2, null],
[null, null, null],
[1, 6, null],
[null, null, null],
[3, 6, null],
[null, null, null],
[4, 5, null],
[null, null, null],
[7, 9, null],
[null, null, null],
[9, 3, null],
// Y2 data
// make (4, 4) and (8, 6) adjacent in the DataTable
[4, null, 4],
[8, null, 6],
// split all others with nulls
[null, null, null],
[0, null, 5],
[null, null, null],
[1, null, 6],
[null, null, null],
[2, null, 9],
[null, null, null],
[3, null, 5],
[null, null, null],
[7, null, 2],
[null, null, null],
[9, null, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
},
1: {
// connect the points in Y2 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
那应该使您开始在ScatterCharts中用线连接点。
关于google-visualization - 如何在Google API中连接散点图中的选定点,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19462862/