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

淡淡的烟草味﹌ 2022-02-19 02:15 242阅读 0赞

### 一、HighCharts-下载HighCharts文件包 ###

下载地址 [**HighCharts7.0.3**][HighCharts7.0.3]  
 如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzczMjI5_size_16_color_FFFFFF_t_70]  
下载的文件包里面缺少一个文件（中文包），可以使用官网的这个文件：

### 二、HighCharts-引入HighCharts文件 ###

如下：  
![在这里插入图片描述][20190415145102280.png]

### 三、HighCharts-利用AJAX实现数据动态绑定显示 ###

**js部分的代码 - - Example Code:**

$(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字符串返回给前台
       }

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzczMjI5_size_16_color_FFFFFF_t_70 1]  
至此，搞定收工。

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

[HighCharts7.0.3]: https://github.com/1831412916/HighCharts.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzczMjI5_size_16_color_FFFFFF_t_70]: /images/20220219/00c769f30d934750b882387d6fccc17e.png
[20190415145102280.png]: /images/20220219/5bc2bcc1f3a846d187c7ead50cadf347.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzczMjI5_size_16_color_FFFFFF_t_70 1]: /images/20220219/8e02cb82837140a5a93110d503983b82.png