javascript - 从变量分配数据时，Google 堆栈图表未呈现

Question

我需要在 Google Charts 中开发一个堆叠图表，但我对它还不熟悉。
这是生成图表的示例代码。

function drawChart()
    {
       var data = google.visualization.arrayToDataTable(["Label", "I", { role: "style" }, "J", { role: "style" }, "K", { role: "style" }, "M", { role: "style" }],["MJ1", 0.05, "#808080", 0.0775, "#C71585", 0.069, "#FFC0CB", 0.05, "Blue"],["MJ2", 0.05, "Yellow", 0.0775, "Pink", 0.069, "#808080", 0.05, "black"]);
       var options = {
            width: 1000,
            height: 550,
            legend: { position: 'none', maxLines: 6, textStyle: {color: 'black', fontSize: 10 } },
            isStacked: true,                
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

上面提到的代码工作正常。但是，当我将数据更改为变量并按如下所述使用该变量时，不会生成图表。

var temp = '["Machine", "I", { role: "style" }, "J", { role: "style" }, "K", { role: "style" }, "M", { role: "style" }],["MJ1", 0.05, "#808080", 0.0775, "#C71585", 0.069, "#FFC0CB", 0.05, "Blue"],["MJ2", 0.05, "Yellow", 0.0775, "Pink", 0.069, "#808080", 0.05, "black"]';

var data = google.visualization.arrayToDataTable([temp]);  

谁能告诉我我做错了什么。
原因:我编写了一个 WCF 服务，它返回与临时变量字符串数据格式相同的简单字符串。
预先感谢!
JSFiddle 相同 - http://jsfiddle.net/crazyCoder1989/79ffvayr/653/

Answer 1

您必须将字符串转换为正确的 JSON 字符串，因此:

• 将 temp 字符串嵌入数组分隔符[]:

  var temp = '['+temp+']';

• 将属性名称括在双引号中:

  temp = temp.replaceAll(' Angular 色', '"Angular 色"');

• 最后 JSON 解析字符串并将结果传递给 arrayToDataTable() 方法:

  
var json = JSON.parse(temp);
var data = google.visualization.arrayToDataTable(json);

检查 fiddle :http://jsfiddle.net/beaver71/zh7upjoz/