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

Question

我正在为我的应用程序使用散点图,因此我为散点图选择了google API.对于我的应用程序,我需要使用行标记连接一些点.我按照这个 链接进行测试.请帮我改进.

Answer 1

如果需要连接ScatterChart上的点,可以通过设置lineWidth选项(创建连接所有数据系列series.<series index>.lineWidth的点的线)或选项(创建连接单个系列的点的线)来实现.这里有些例子:

使用该lineWidth选项连接所有系列中的点(jsfiddle示例):

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示例)连接一个数据系列中的所有点):

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示例)中的点(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});

这里需要注意的重要一点是,DataTable中相邻的点将与线连接.如果要连接图表中不相邻的点,则需要重新排列数据.这是连接Y1中的点(2,5)和(8,4)以及Y2(jsfiddle示例)中的(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中的线连接点.