Razor

Question

我在模型中创建了一个字典，其中城市作为键，孩子的数量作为值 (@Model.dictionary)。我想动态地制作饼图，所以如何在我的 drawChart 函数中使用字典数据而不是静态数据。

希望大家能帮帮我，非常感谢

   <html>
    <head>

    </head>
    <body>
        <div id="piechart_3d" style="width: 900px; height: 500px;"></div>

        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);


          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['City', 'Kids per Day'],
              ['LA',    100000],
              ['NY',    100000]
            ]);

            var options = {
              title: 'Kids per City',
              is3D: true,
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
            chart.draw(data, options);
          }
        </script>
    </body>
    </html>

Answer 1

您可以使用 razor 创建一个 javascript 数组 ，使用 this answer 将 List 转换为 arra，您可以从Dictionary 很简单：

var array = [@Html.Raw(String.Join(",", Model.dictionary.Select(x => "['" + x.Key + "', '" + x.Value +"']")))];

这将创建

[
   ['LA',    100000],
   ['NY',    100000]
]

您可以像这样使用它，只需稍作修改。

function drawChart() {
    var javaScriptArray = @Html.Raw(Json.Encode(Model.YourDotNetArray));


    var data = google.visualization.arrayToDataTable([
      ['City', 'Kids per Day'],
      @Html.Raw(String.Join(",", Model.dictionary.Select(x => "['" + x.Key + "', '" + x.Value +"']")))
    ]);

    var options = {
      title: 'Kids per City',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }

Razor - 使用 JavaScript 在饼图中显示字典数据

Razor - Display Dictionary Data in a PieChart using JavaScript

javascript

c#

dictionary

pie-chart