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();
        }

其他参数没有过多研究，可查看官网

转载于:https://www.cnblogs.com/lovejunjuan/p/5643430.html