Google visualization 一行多值谷歌图

我想在谷歌中生成与图片中相同的线条图，但我不能这样做。我有A、B和C这些字母中的每一个都有一些值（A1、A2、B1、B2…例如）日期相同，但不同的只是时间（分或秒，但日期相似）我只能在一个日期中为一个字母生成一个点：

    [cols] => Array
        (
            [0] => Array
                (
                    [id] => 
                    [label] => Timestamp
                    [type] => string
                )

            [1] => Array
                (
                    [id] => 
                    [label] => A
                    [type] => number
                )

            [2] => Array
                (
                    [id] => 
                    [label] => B
                    [type] => number
                )

            [3] => Array
                (
                    [id] => 
                    [label] => C
                    [type] => number
                )

        )

[rows] => Array
    (
        [0] => Array
            (
                [c] => Array
                    (
                        [0] => Array
                            (
                                [v] => 2014-01-30
                            )

                        [1] => Array
                            (
                                [v] => 120
                            )

                        [2] => Array
                            (
                                [v] => 100
                            )

                        [3] => Array
                            (
                                [v] => 35
                            )

                    )

            )

        [1] => Array
            (
                [c] => Array
                    (
                        [0] => Array
                            (
                                [v] => 2014-01-30
                            )

                        [1] => Array
                            (
                                [v] => 334
                            )

                        [2] => Array
                            (
                                [v] => 55
                            )

                        [3] => Array
                            (
                                [v] => 15
                            )

                    )

            )
     )

这些代码为我提供了3行单独的数据，在一个日期（2014-01-30）中只有3个值，下一个日期也是相同的（2014-01-30），但我想在一行中收集所有这些数据，如下图所示。提前感谢大家

---

要使这项工作成功，需要一些技巧。您需要像这样组织数据：

Date       | Type | Value | Label
---------------------------------
30.01.2014 | A    | 75    | A1
30.01.2014 | A    | 100   | A2
30.01.2014 | A    | 125   | A3
30.01.2014 | B    | 150   | B1
30.01.2014 | B    | 175   | B2
30.01.2014 | B    | 200   | B3
30.01.2014 | C    | 180   | C1
30.01.2014 | C    | 210   | C2
30.01.2014 | C    | 270   | C3

31.01.2014 | A    | 75    | A1
31.01.2014 | A    | 100   | A2
31.01.2014 | A    | 125   | A3
31.01.2014 | B    | 150   | B1
31.01.2014 | B    | 175   | B2
31.01.2014 | B    | 200   | B3
31.01.2014 | C    | 180   | C1
31.01.2014 | C    | 210   | C2
31.01.2014 | C    | 270   | C3

数据需要按照您希望绘制线的顺序排序（因此，如果您希望2014年1月30日的线的顺序为A1、A2、A3、B1、B2、B3，则该顺序必须在表中）

接下来，您需要使用DataView将其拆分为多个数据系列，以获得与图例类似的点颜色编码：

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: 'string',
    role: 'annotation',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 3) : null;
    }
}, {
    type: 'number',
    label: 'A',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
    }
}, {
    type: 'string',
    role: 'annotation',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 3) : null;
    }
}, {
    type: 'number',
    label: 'A',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
    }
}, {
    type: 'string',
    role: 'annotation',
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 3) : null;
    }
}, 2]);

然后，在绘制图表时，设置

系列

选项以使点和线正确显示：

series: {
    0: {
        // series A options
        pointSize: 3,
        lineWidth: 0
        // you can set the color here with the "color" option if you want
    },
    1: {
        // series B options
        pointSize: 3,
        lineWidth: 0
        // you can set the color here with the "color" option if you want
    },
    2: {
        // series C options
        pointSize: 3,
        lineWidth: 0
        // you can set the color here with the "color" option if you want
    },
    3: {
        // this series draws the line
        pointSize: 0,
        lineWidth: 1,
        visibleInLegend: false,
        enableInteractivity: false
        // you can set the color here with the "color" option if you want
    }
}

---

请参见此处的示例：

可以这样做吗？非常感谢！这对我很有帮助，非常有用！我试图生成另一个类似于此的图形，并尝试使其（）但无法显示空白页，请告诉我方向