Google Line Chart添加对象数组

时间:2015-10-22 12:42:09

标签: javascript google-visualization

我有一组通过解析JSON字符串创建的对象:

    var measurementData = @Html.Raw(JsonConvert.SerializeObject(this.Model.Item1));
    var stringifiedData = JSON.stringify(measurementData);
    var parsedData = JSON.parse(stringifiedData);

这给了我许多对象,具体取决于模型,如下所示:

enter image description here

现在我的问题是,如何将这些添加到Google折线图而不必将其硬编码到数据表中?

这就是我现在所拥有的,有些作用:

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'TimeStamp');
        data.addColumn('number', selectedMeasurements);

        data.addRows([
            [parsedData[index[0]].TimeStamp, parsedData[index[0]][selectedMeasurements]],
            [parsedData[index[1]].TimeStamp, parsedData[index[1]][selectedMeasurements]]
        ]);

        chart.draw(data, options, {
            isStacked: true,
            vAxis: {
                viewWindowMode: 'explicit',
                viewWindow: {
                    max: 100,
                    min: 0
                }
            }
        });

这里我将两个数据数组添加到数据表中,因为有两个要添加的对象。但是,如果我只有一个呢?还是10?我想象.addRows中的某种foreach,但我不知道如何实现这一目标。

任何帮助表示赞赏!

1 个答案:

答案 0 :(得分:2)

你可以使用" setValue(rowIndex,columnIndex,value)"方法:

var jsonData = '[{"SlideId":"D2011", "InstrumentId":"I335", "IncMin":"37.13", "IncMax": "37.19", "BrMin":"31.4"}, {"SlideId":"D2014", "InstrumentId":"I335", "IncMin":"37.13", "IncMax": "37.19", "BrMin":"31.4"}]';

var parsedData = JSON.parse(jsonData);
var len = parsedData.length;

var data = new google.visualization.DataTable();
data.addColumn('string', 'TimeStamp');
data.addColumn('number', selectedMeasurements);

data.addRows(len);

for (var n = 0; n < len; n++) {
    var i=0;
    for (var key in parsedData[n]) {
        data.setValue(n, i, parsedData[n][key]);
        i++;
    }
}

chart.draw(data, options, {
        isStacked: true,
        vAxis: {
            viewWindowMode: 'explicit',
            viewWindow: {
                max: 100,
                min: 0
            }
        }
});

http://jsfiddle.net/mblenton/qnusuLtn/2/