ASP.NET MVC 4使用技巧9：使用Google Charts和JSON

Google Charts 令人爱不释手，功能强大而且简单美观，文档非常完善。

https://developers.google.com/chart/

这里同时推荐一下Playerground，真是是一个非常好用的“工具”，可以非常方便地进行测试。

http://code.google.com/apis/ajax/playground/

如果想画一个line chart，并使用JSON得到做图的数据，很简单，以下就是一个简单的例子，在我们的.cshtml中添加上我们需要的js代码，在这个例子中，

• 引用jsapi库并使用一系列Google Chart API，进行做图。
• 通过点击一个button激活做图function。
• 通过google.visualization.events.addListener得到点击line的事件。
• 通过$.post('/YourController/GetDrawJsonData', {}, function (d) { … …); }); 从我们的Controller中得到Json数据。

<script type="text/javascript" src="//www.google.com/jsapi"></script>

    <script type="text/javascript">

        google.load("visualization", "1", { packages: ["corechart"] });

        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

            var button_show_all = document.getElementById('show_all');

            //-- Set a button onclick event

            // Multi graph.

            button_show_all.onclick = function () {

                var options =

                {

                    title: 'All Heuristic Methods',

                    colors: ['#E6E6E6'],

                    //colors: ['#93ACE7'],

                    legend: { position: 'none' }

                    //legend: { position: 'top', maxLines: '5' }

                    //series: [{ color: 'blue', visibleInLegend: true }, { color: 'blue', visibleInLegend: true }]

                };

                // Add our selection handler.

                google.visualization.events.addListener(chart, 'select', lineChartHandler);

                //-- Chart click event

                function lineChartHandler() {

                    var selection = chart.getSelection();

                    if (selection.length > 0) {

                        alert('A Line was selected');

                    }

                }

                $.post('/Plan/GetDrawJsonData', {},

                function (d) {

                    //alert(d);

                    var data = google.visualization.arrayToDataTable(d);

                    // At the end draw the chart.

                    chart.draw(data, options);

                });

            }

   }

</script>

它的html代码就更简单了：

<input id="show_all" type="button" class="btn btn-info" value="Show All Charts"  />

<br />

<div id="chart_div" style="width: auto; height: 400px;">

</div>

在Controller中只需要加入生成JSON数据的方法：

public ActionResult GetDrawJsonData()

{

     List<object> data_todraw = ... ... ...;

    return Json(data_todraw);

}

 

进阶一下，如果想要通过JSON改变做图的options，譬如说是颜色，其实也很方便，先在js中加入一个chart_opt的arrary：

var chart_opt = new Object();

chart_opt.title = "Heuristic Method";

var colors = new Array();

colors[0] = "#93ACE7"

chart_opt.colors = colors;

var lengend = new Object();

lengend.position = 'none';

chart_opt.legend = lengend;

 

然后通过一个function得到json数据，这里的row: input_counter是一个输入，我们的Controller的方法可以通过这样的方式得到这个输入：

$.post('/YourController/GetDrawJsonOptionSingle', { row: input_counter },

function (f) {

   //console.log(f);

   //If for some reason you cannot modify your server side script to provide 

   //a valid JSON in the tags property you could still use eval instead of $.parseJSON:var tags = $.parseJSON(response.tags);

   var colors_tmp = eval(f);

   console.log(colors_tmp);

   for (i = 0; i < colors_tmp.colors.length; i++) {

       colors[i] = colors_tmp.colors[i];

   }

});

与之对应的Controller里的method，需要使用一个Class里面定义colors的List，最后通过return Json(…)返回JSON数据：

public class ChartOptions

{

    public List<string> colors;

}

 

public ActionResult GetDrawJsonOptionSingle(int row)

{

 

    ChartOptions tmp = new ChartOptions();

    tmp.colors = new List<string>();

    for (int i = 0; i < ROW_COUNT_ALL; i++)

    {

        if (i == row)

        {

            tmp.colors.Add("#F30A0A");

        }

        else

        {

            tmp.colors.Add("#E6E6E6");

        }

    }

    return Json(tmp);

}