google-visualization - 如何连接google api散点图中的选定点

Question

我正在为我的应用程序使用散点图，所以我选择了 google API 作为散点图。对于我的应用程序，我需要用线标记连接一些点。我关注了 this
测试链接。请帮助我改进。

Answer 1

如果您需要连接散点图上的点，您可以通过设置 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});

这里要注意的重要一点是，DataTable 中相邻的点将用线连接。如果要连接图表中不相邻的点，则需要重新排列数据。这是连接 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 中的线连接点。