c# HighCharts使用，

c# HighCharts使用，

最近接到個圖形報表的需求，網絡上找了幾個插件，最後決定用highcharts

需要的文件 

1、bll文件，添加到項目引用   http://files.cnblogs.com/files/lovejunjuan/HighChartsMvc.Model.rar

2、js文件，在項目中添加引用   http://files.cnblogs.com/files/lovejunjuan/highcharts.js

引用bll文件

@using HighChartsMvc.Model.Chart;
@using HighChartsMvc.Model.Chart.SeriesStlye;

引用js文件

<script src="@Url.Content("~/Content/Highcharts-4.2.6/js/highcharts.js")" type="text/javascript"></script>

ajax從後台獲取數據綁定到控件

$.ajax({
        type: 'get',
        url: durl,//請求數據的地址
        success: function (data) {
            var json = eval("(" + data + ")");
            alert(json);
            var s = 1;
            for (var key in json.list) {
                json.list[key].y = json.list[key].age; //給Y軸賦值
                xtext = json.list[key].name;//給X軸TEXT賦值
                json.list[key].color = color[key];
            }
            chart.series[0].setData(json.list);//數據填充到highcharts上面
        },
        error: function (e) {
        }
    });
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column' //顯示類型 柱形,可修改為其他類型，餅圖曲線圖等，數據綁定方式都一樣，非常方便
        },
        title: {
            text: '產量分布圖' //圖表的標題
        },
        xAxis: {
            categories: xtext
        },
        yAxis: {
            title: {
                text: '產量' //Y軸的名稱
            },
        },
        series: [{
            name: "產量"
        }]
    });

json數據格式

public string DataTableToJson(DataTable dt)
        {
            StringBuilder jsonBuilder = new StringBuilder();
            jsonBuilder.Append("{\"");
            jsonBuilder.Append("list");
            jsonBuilder.Append("\":[");
            
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    jsonBuilder.Append("\"");
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    jsonBuilder.Append("\":");
                    //jsonBuilder.Append("\":\"");
                    //判斷下是否純數字，highcharts插件不是純數字的值要加雙引號
                    if (IsNumber(dt.Rows[i][j].ToString()))
                    {
                        jsonBuilder.Append(dt.Rows[i][j].ToString());
                    }
                    else
                    {
                        jsonBuilder.Append("\"");
                        jsonBuilder.Append(dt.Rows[i][j].ToString());
                        jsonBuilder.Append("\"");
                    }
                    jsonBuilder.Append(",");
                    //jsonBuilder.Append("\",");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("},");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("]");
            jsonBuilder.Append("}");
            return jsonBuilder.ToString();
        }

其他參數沒有過多研究，可查看官網