HighCharts实现数据动态绑定（AJAX）

<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js" type="text/javascript"></script>

    $(function () {
        loadChart();
    })
   
    function loadChart() {
        var chart = null;
        var data = $('#form1').formSerialize();
        var url = '/xxxx/xxxx/GetChartList';
        if (!!data)
            url +='?param1=' + data['param1'] + '&param2=' + data['param2'] + '&param3=' + data['param3'] + '&param4=' + data['param4'];//这里我用的是get所以得把form表单里面的参数取出来（个人喜好用get方式提交）
        $.getJSON(url, function (csv) {
            chart = Highcharts.chart('container', {
               chart:{
                 type:'line'//折线
                },
                title: {
                    text: '信息图表'
                }, subtitle: {
                    text: '数据来源于xxx'
                }, xAxis: {
                    categories: csv.categoriesData//显示底部菜单信息
                }, yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
                    title: {
                        text: '万元(¥)'
                    },
                    labels: {
                        align: 'left',//左边的Y轴数据
                        x: 3,
                        y: 16,
                        format: '{value:.,0f}'//格式化Y轴数据
                    },
                    showFirstLabel: false
                }, {    // 第二个坐标轴，放置在右边
                    linkedTo: 0,
                    gridLineWidth: 0,
                    opposite: true,  // 通过此参数设置坐标轴显示在对立面
                    title: {
                        text: '万元(¥)'
                    },
                    labels: {
                        align: 'right',//右边的Y轴
                        x: -3,
                        y: 16,
                        format: '{value:.,0f}'
                    },
                    showFirstLabel: false
                }],
                credits: false,
                series: csv.series
            });
        }, "json");

html部分代码 - - Example Code:

<div class="topPanel" style="float:left;width:100%;display:block;">
    <form id="form1">
        <div class="search">
            <table>
                <tr>
                    <td class="cell">
                        <select id="param1" name="param1" class="form-control" style="width:111px!important;">
                            <option value="" selected>--条件1--</option>
                        </select>
                    </td>
                    <td class="cell">
                        <select id="param2" name="param2" class="form-control" style="width:111px!important;">
                            <option value="" selected>--条件2--</option>
                        </select>
                    </td>
                    <td class="cell">
                        <select id="param3" name="param3" class="form-control">
                            <option value="" selected>--条件3--</option>
                        </select>
                    </td>
                    <td class="cell">
                        <select id="param4" name="param4" class="form-control">
                            <option value="" selected>--条件4--</option>
                        </select>
                    </td>
                    <td>
                        <button id="btn_search" type="button" class="btn  btn-primary"><i class="fa fa-search"></i>查询</button>
                    </td>
                    <td style="padding-left:5px;">
                        <button id="btn_reset" type="reset" class="btn  btn-primary" onclick="form1.reset()"><i class="fa fa-search"></i>清空</button>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</div>
<div class="Chart">
   @*放置HighCharts图表的地方*@
    <div id="container" style="min-width: 310px; height: 310px; margin: 0 auto"></div>
</div>

后台功能代码（C#）-- Example Code:

public ActionResult GetChartList(){
   List<object> list = new List<object>();
   //拼接前台图表显示的数据格式
   foreach (var item in dataList)
   {
      list.Add(new{
                   name=xxxxx,
                   data=new int[]{1,23,45,62,3323,431,12,54,123,1233423,232}//此处的data数据里面的数据对应下面data里面的categoriesData 数据列
              });
   }
   var data = new {
                   categoriesData = new string[] { "column1", "column2", "column3", "column4", "column5", "column6", "column7", "column8", "column9","column10", "column11" },
                   series = list
                   };
   return Content(data.ToJson());//转换成JSON字符串返回给前台
   }

效果图：

至此，搞定收工。

相信他说的话，但不要当真。