C# 将ASP.NET C字典数据解析为Google可视化图表

我有一个ASP.net应用程序，使用C作为服务器语言。 我这里有一个包含数据的字典，我想把它放在谷歌可视化图表中。我必须在运行时动态创建图表，因此没有硬编码的HTML标记。我有一份文件要打印到网站上，但要填写我自己的数据：

 <script type="text/javascript">
     var data;
     var chart;

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create our data table.
        data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', 'Serie1'); // DATA HERE
        data.addColumn('number', 'Serie2'); // DATA HERE
        data.addRows([
          ['Mushrooms', 3,4], // DATA HERE
          ['Onions', 1,4],// DATA HERE
          ['Olives', 1,6],// DATA HERE
          ['Zucchini', 1,7],
          ['Pepperoni', 2,4]// DATA HERE
        ]);


        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

    </script>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>

---

那么如何格式化字典数据并替换虚拟数据呢？

您可以使用Razor将字典中的数据插入脚本：

<script type="text/javascript">
....
    data.addRows([
          @Model.DataRows
    ]);
....
</script>

并在视图顶部放置如下内容：@model[Your_Namespace].ChartModel

然后在控制器中设置DataRows属性：

    public ActionResult Index()
    {
        Dictionary<string, int> datas = new Dictionary<string, int>();
        datas.Add("Januar 2015", 3129);
        datas.Add("Februar 2015", 3129);
        ChartModel model = new ChartModel();
        model.DataRows = string.Join(", " + Environment.NewLine, 
            datas.Select(d => "['" + d.Key + "', " + d.Value + "]"));
        return View(model);
    }

---

分享你的字典样本。2015年1月31日：2015年2月29日：1859年Marts 2015:3002 2015年4月：2473年Maj 2015:3015年Juni 2015:3662朱利2015:2160 2015年8月：2250 2015年9月：1944年Oktober 2015:1711 2015年11月：874 2015年12月：628 2016:960请详细说明你的答案。举个例子？看起来不错！不过我有点困惑。脚本将放在哪里？我不能在ASPXHTML文件中硬编码它，因为我必须在运行时生成未知数量的这些图表。数据格式看起来不错！thanks@CasperTraberg-Larsen你可以把你的脚本放在页面上，就像你在问题中展示的一样。每次生成页面时，都会生成脚本的新版本。您还可以从JavaScript代码中调用操作方法，请参见：问题是：脚本不在页面上。我会在运行时将它注入一个空div。因此'div.InnerHTML+=scriptString；'对于我必须生成并放在页面上的每个图表。但这似乎是一个糟糕的解决方案，其中包含脚本的巨大字符串在运行时被推送到div。@CasperTraberg Larsen那么本文应该有帮助：

    public ActionResult Index()
    {
        Dictionary<string, int> datas = new Dictionary<string, int>();
        datas.Add("Januar 2015", 3129);
        datas.Add("Februar 2015", 3129);
        ChartModel model = new ChartModel();
        model.DataRows = string.Join(", " + Environment.NewLine, 
            datas.Select(d => "['" + d.Key + "', " + d.Value + "]"));
        return View(model);
    }