如何在我的视图中显示谷歌图表？答案

【问题标题】：How to display google chart in my View?如何在我的视图中显示谷歌图表？
【发布时间】：2013-09-19 09:39:57
【问题描述】：

我在我的控制器中用 c# 创建了一个数组，看起来像这样：

[["test", "atest", "btest", "ctest"],["1","2","3","4"]...]

所以它是一个数组数组。然后我将它传递给 ViewBag 中名为 ViewBag.TabComplet 的视图。现在我需要将该数据数组传递给谷歌图表可视化，如下所示：

google.load("visualization", "1", { packages: ["corechart"], callback: drawVisualization() });
function drawVisualization() {
    var data = google.visualization.arrayToDataTable(@ViewBag.TabComplet);
    var options = {
        title: "Nombres d'incidents ouverts en Hotline en 2013",
        vAxis: { title: "Cups" },
        hAxis: { title: "Month" },
        seriesType: "bars",
        series: { 2: { type: "line"} },
        colors: ["blue", "#01A9DB", "red"]
    };
    var chart = new google.visualization.ComboChart(document.getElementById("chart_div"));
    chart.draw(data, options);
}

但不幸的是，它向我显示了一条错误消息：Unexpected Token ] 有人有解决方案吗？

【问题讨论】：

你能发布你的完整数组吗
你的拳头是什么？是数据还是？你想代表什么...给我们一些信息。
在浏览器中打开页面，查看源代码，然后发布 javascript，以便我们查看代码生成的内容。
我找到了解决方案并在下面回答了我的问题。感谢您的提问。

标签： c# javascript arrays asp.net-mvc-4 google-visualization

【解决方案1】：

我找到了解决方案。对于那些感兴趣的人，javascript 函数 arrayToDataTable 分析每一列中的数据类型，如果要显示的数据不是 int，则会显示错误并表明数据类型不正确。如果你想避免使用那个函数，你可以使用不同的函数 addRow, addColumn,.. 来构建一个正确的数据数组。据此，我在控制器中创建了一个函数，由 ajax 调用调用，它返回一个 JSON 数组，如下所示：

[["Mois","Nombre incidents","Nombre incidents pris en direct"],["Jan",15,2],["Fév",9,5],["Mar",14,3],["Avr",19,9],["Mai",9,8],["Juin",12,6],["Juil",13,5],["Aoû",4,3],["Sept",11,0],["Oct",0,0],["Nov",0,0],["Dec",0,0]]

如您所见，它是一个数组数组，其中第一个数组是每个后续数据的标签，然后每个数组的第一个值是一个字符串，将是每个数据数组的 X 轴标签。

您可以直接将 JSON 作为图表源传递。您不需要将其解析为 javascript 数组。

【讨论】：