HighChat动态绑定数据 数据后台绑定（三）

今天看了几位大佬的博客，学到了一些，现在分享一下，也作为以后的参考

 不多说看代码

1.后台代码

 public ActionResult Ajax2() {
            ReportData reportData = new ReportData();
            string[] key = { "2017-08-01", " 2017-08-02", "2017-08-03", "2017-08-04", "2017-08-05", "2017-08-06", "2017-08-07", "2017-08-08", " 2017-08-09", "2017-08-10", "2017-08-11", "2017-08-12" };
            reportData.categories = key;
            double?[] value = { 3.9, 4.6, 5.7, 10.5, 1.9, 15.2, 15.0, 16.6, 19.2, 10.0, 5.2, 46.8 };
            double?[] value1 = { 3.9, 3.6, 5.7, 8.5, 1.9, 15.2, 12.0, 16.6, 12.2, 10.0, 5.1, 46.8 };
            ReportItem ri1 = new ReportItem() { data = value, name = "Agent Used" };
            reportData.ReportItems.Add(ri1);

            ReportItem ri2 = new ReportItem() { data = value1, name = "Emission" };
            reportData.ReportItems.Add(ri2);


            return Json(reportData);
        }

定义了实体类，来接收数据

public class ReportData {
        public string[] categories { get; set; }
        public List<ReportItem> ReportItems = new List<ReportItem>();

    }
    public class ReportItem {
        public string name { get; set; }
        public double?[] data { get; set; }
    }

前台也很简单

 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/charts/highcharts/exporting.js"></script>
    <script src="~/charts/highcharts/highcharts.js"></script>
    <script src="http://github.highcharts.com/master/modules/no-data-to-display.src.js"></script>
    <script src="~/charts/highcharts/highcharts_jquery-1.8.3.min.js"></script>
</head>
<body>
    <div id="container">

    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "/Home/Ajax2",
            type: "post",
            dataType: 'json',
            async: false, //同步处理后面才能处理新添加的series
            success: function (data) {
                columnBasic(data.categories, data.ReportItems);
            }
        });
    });
    function columnBasic(categories, series) {
        var chart = new Highcharts.Chart('container', {
            title: {
                text: '不同城市的月平均气温',
                x: -20
            },
            subtitle: {
                text: '数据来源: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: categories//['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                title: {
                    text: '温度 (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: series
            
        });
    }


</script>

 

 

ga感觉这种是最简单的，全部数据都是从后台绑定，前台只负责展示，也是看了好多大佬的文章，才学到的。

 

下载链接：http://pan.baidu.com/s/1skOrBQX

 

posted @ 2017-08-02 10:08  今晚再打老虎  阅读(344)  评论(0)  编辑  收藏  举报