Google Line图表,删除额外的行

时间:2014-01-31 01:49:08

标签: google-visualization linegraph

我是Google Graphs的新手,我正在努力在下面的照片(预期)中生成此图表 但我得到了一点点不同的图表。我有三个不同的字母,每个字母都包含自己的值(A1,A2,A3,B1,B2 ......例如)。

我正在尝试的代码:

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('string', 'Type');
    data.addColumn('number', 'Value');

    data.addRows([
    [new Date(2014, 0, 30), 'A', 75],
    [new Date(2014, 0, 30), 'A', 100],
    [new Date(2014, 0, 30), 'A', 125],

    [new Date(2014, 0, 31), 'A', 75],
    [new Date(2014, 0, 31), 'A', 100],
    [new Date(2014, 0, 31), 'A', 125],

    [new Date(2014, 0, 30), 'B', 150],
    [new Date(2014, 0, 30), 'B', 175],
    [new Date(2014, 0, 30), 'B', 200],

    [new Date(2014, 0, 31), 'B', 150],
    [new Date(2014, 0, 31), 'B', 175],
    [new Date(2014, 0, 31), 'B', 200],
]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: 'A',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null;
        }
    }, {
        type: 'number',
        label: 'B',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
        }
    }, {
        type: 'number',
        label: 'C',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
        }
    }, 2]);

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        hAxis: {
            format: 'dd.MM.yyyy',
            minValue: new Date(2014, 0, 29, 12),
            maxValue: new Date(2014, 0, 31, 10)
        },
        series: {
            0: {
                // series A options
                pointSize: 5,
                lineWidth: 0

            },

            3: {
                // this series draws the line
                pointSize: 0,
                lineWidth: 1,
                visibleInLegend: false,
                enableInteractivity: false,
                color:'blue'
            }
        }
    });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

它向我展示了这一点,我不知道如何删除31.01.2014中的一行 - > A3与30.01.2014-> B1和蓝色圆点蓝色线和红色圆点红色线可以吗? :

enter image description here

但预计会出现以下情况:

enter image description here

1 个答案:

答案 0 :(得分:1)

在这种情况下,我对previous question的回答并不是最好的解决方法,但有一个简单的解决方案可以修改现有代码以使其正常工作。从传递给2的数组末尾删除view.setColumns

view.setColumns([0, {
    type: 'number',
    label: 'A',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null;
    }
}, {
    type: 'number',
    label: 'B',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
    }
}, {
    type: 'number',
    label: 'C',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
    }
}]);

并调整系列选项:

series: {
    0: {
        // series A options
        pointSize: 5,
        lineWidth: 1
    },
    1: {
        // series B options
        pointSize: 5,
        lineWidth: 1
    },
    2: {
        // series C options
        pointSize: 5,
        lineWidth: 1
    }
}