0

我是谷歌图表的新手，我正在尝试在下面的照片（预期）中生成这个图表，但我得到的图表有点不同。我有三个不同的字母，每个字母都包含它们自己的值（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 和线的颜色为蓝点蓝色和红点红线是否可能？：

在此处输入图像描述

但预期如下：

在此处输入图像描述

4

1 回答 1

1

在这种情况下，我对您上一个问题的回答并不是解决此问题的最佳方法，但是有一个简单的解决方案可以修改您现有的代码以使其正常工作。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
    }
}
于 2014-01-31T17:31:01.747 回答