google-visualization - 一行谷歌图表中的多值

Question

我想在谷歌折线图中生成相同的图片，但我不能这样做。我有 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 ）但是我想在一行中收集所有这些数据，正如我在下面的照片。提前感谢大家！

Answer 1

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

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选项以使点和线正确显示：

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
    }
}

在此处查看示例：http: //jsfiddle.net/asgallant/bn9tE/