Javascript HTML Google 图表

Question

我有一个 json，其中包含每个服务器的名称和 3 个值：内存、负载和 cpu。

[
{
    "server": "Server1",
    "Load": "0.04",
    "Mem": "64.46",
    "Idle": "97.00"
},
{
    "server": "Server2",
    "Load": "0.01",
    "Mem": "64.79",
    "Idle": "97.49"
}
]

我在尝试动态创建 Google 图表时遇到了一些问题。看起来 Javascript 无法使用循环变量 'i' 创建变量。请参阅下面的代码：

var obj = JSON.parse(jsonData);

for (i in obj)
{

var data_table[i] = new google.visualization.DataTable();

    data_table[i].addColumn('string', 'Label');
    data_table[i].addColumn('number', 'Value');

    var server = obj[i].server;
    var Load = parseFloat(obj[i].Load);
    var Mem = parseFloat(obj[i].Mem);
    var Idle = parseFloat(obj[i].Idle);
    data_table[i].addRow([server, Load]);
    data_table[i].addRow([server, Mem]);
    data_table[i].addRow([server, Idle]);
var options = {width: 1500, height: 1000, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5};
var chart[i] = new google.visualization.Gauge(document.getElementById('chart_div'+ i +));
chart[i].draw(data_table+i+, options); ' );

$('body').append('<div id="div'+ i +'" />')
}

我想动态创建图表以控制稍后在 javascript/html 中的这些图表，而且最重要的是，因为我的 json 有点大，所以我想避免创建每个图表一张一张的图表，或者必须为每个服务器分开 json。任何帮助将不胜感激。 ;-)

Answer 1

像这样尝试...

// load json
var obj = JSON.parse(jsonData);

// define arrays to store data and charts
var data_tables = [];
var google_charts = [];

// this is the div that will store all of the charts
var chart_area;
chart_area = document.getElementById('chart_div');

// set the chart options
var chart_options;
chart_options = {
    width: 1500,
    height: 1000,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5
};

// process json array -- fyi: use 'in' keyword for object keys
for (var i = 0; i < obj.length; i++) {
    var chart_container;  // chart container for this json instance
    var data_table;       // data table for this json instance
    var google_chart;     // google chart for this json instance

    // load data table
    data_table = new google.visualization.DataTable();
    data_table.addColumn('string', 'Label');
    data_table.addColumn('number', 'Value');
    data_table.addRow([obj[i].server, parseFloat(obj[i].Load)]);
    data_table.addRow([obj[i].server, parseFloat(obj[i].Mem)]);
    data_table.addRow([obj[i].server, parseFloat(obj[i].Idle)]);

    // save it to the array
    data_tables.push(data_table);

    // create the container for this chart
    chart_container = document.createElement('DIV');
    chart_area.appendChild(chart_container);

    // create -- save -- draw the chart
    google_chart = new google.visualization.Gauge(chart_container);
    google_charts.push(google_chart);
    google_chart.draw(data_table, chart_options);
}

// access the charts / data later using arrays --> data_tables and google_charts

Javascript HTML Google 图表

Javsascript HTML Google Chart

javascript

charts

json

google-visualization

google-apps-script