根据生成的数组渲染Google图表

时间:2018-11-27 10:20:41

标签: javascript arrays google-visualization

问题:

我正在尝试提出以下内容:enter image description here

作为Google图表。这是我的数组:

chat-list

所以我想做的是这样:

[
    [
        "3600000",
        21,
        9,
        12
    ],
    [
        "18000000",
        33,
        5,
        28
    ],
    [
        "86400000",
        211,
        14,
        197
    ],
    [
        "172800000",
        230,
        7,
        223
    ],
    [
        "259200000",
        145,
        1,
        144
    ],
    [
        "345600000",
        150,
        2,
        148
    ],
    [
        "432000000",
        266,
        5,
        261
    ],
    [
        "518400000",
        350,
        2,
        348
    ],
    [
        "604800000",
        398,
        3,
        395
    ],
    [
        "1209600000",
        2544,
        19,
        2525
    ],
    [
        "2592000000",
        3758,
        45,
        3713
    ],
    [
        "5184000000",
        5306,
        28,
        5278
    ]
]

但这失败了。错误提示:

  

错误:第0行有13列,但必须有4 jsapi_compiled_default_module.js:129:153

所以我假设它实际上并没有返回值,因为如果这样做的话:

<Chart
    chartType="Line"
    loader={<div>Loading Chart</div>}
    data={[
        [
            'Czas',
            'Wszyscy',
            'Rozwiazujacy',
            'Uczniowie',
            // 'Admini',
        ],
        this.state.sortedForChart.map(ch => {
            console.log(ch);
            // This logs arrays like this:
            // ["259200000", 144, 1, 143]

            return ch;
        })
        // These are the examples provided by Google.
        // [1, 37.8, 80.8, 41.8],
        // [2, 30.9, 69.5, 32.4],
        // [3, 25.4, 57, 25.7],
        // [4, 11.7, 18.8, 10.5],
        // [5, 11.9, 17.6, 10.4],
        // [6, 8.8, 13.6, 7.7],
        // [7, 7.6, 12.3, 9.6],
        // [8, 12.3, 29.2, 10.6],
        // [9, 16.9, 42.9, 14.8],
        // [10, 12.8, 30.9, 11.6],
        // [11, 5.3, 7.9, 4.7],
        // [12, 6.6, 8.4, 5.2],
        // [13, 4.8, 6.3, 3.6],
        // [14, 4.2, 6.2, 3.4],
    ]}
    options={{
        chart: {
            title: 'Czestotliwosc logowania',
        },
    }}
/>

这将产生一个美观而准确的图表。但是我想不出一种使它起作用的方法,这样我就不必键入数组的每个部分。有什么想法吗?

编辑:这也可以:

data={[
    [
        'Czas',
        'Wszyscy',
        'Rozwiazujacy',
        'Uczniowie',
    ],
    [
        "3600000",
        20,
        9,
        11
    ],
    [
        "5184000000",
        5306,
        28,
        5278
    ]
]}

1 个答案:

答案 0 :(得分:0)

好了,解决了!

let dataForGeneralChart = [[
    'Czas',
    'Wszyscy',
    'Rozwiazujacy',
    'Uczniowie',
    // 'Admini',
]];

sortedForGeneralChart.forEach(ch => {
    dataForGeneralChart.push(ch);
});


<Chart
    chartType="Line"
    loader={<div>Loading Chart</div>}
    data={this.state.dataForGeneralChart}
    options={{
        chart: {
            title: 'Czestotliwosc logowania wszystkich',
        },
    }}
/>