我正在为我的应用程序使用散点图,因此我选择了散点图的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/

10-12 12:45
查看更多