Google Graph中的多行价值

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/