Question

我正在为我的应用程序使用散点图，因此我为散点图选择了google API。对于我的应用程序，我需要使用行标记连接一些点。我跟着this 测试链接。请帮我改进。

Answer 1

如果您需要连接ScatterChart上的点，可以通过设置lineWidth选项（创建连接所有数据系列的点的线）或{{1}来实现此目的。 }选项（创建连接单个系列的点的线）。以下是一些例子：

使用series.<series index>.lineWidth选项连接所有系列中的点（jsfiddle example）：

lineWidth

使用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});选项（jsfiddle example）连接一个数据系列中的所有点：

series.<series index>.lineWidth

如果您只想连接数据系列中的某些点，则必须在不要连接线的所有点之间插入空值。以下是连接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],
        [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});

这里要注意的重要一点是 DataTable 中相邻的点将与线连接。如果要连接图表中不相邻的点，则需要重新排列数据。这是连接Y1中的点（2,5）和（8,4）以及Y2中的（4,4）和（8,6）中的点（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],
        [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});

这应该让你开始用ScatterCharts中的行连接点。

如何在谷歌api中的散点图中连接选定的点

1 个答案: