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

不多说看代码

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: -

            },

            subtitle: {

                text: '数据来源: WorldClimate.com',

                x: -

            },

            xAxis: {

                categories: categories//['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

            },

            yAxis: {

                title: {

                    text: '温度 (°C)'

                },

                plotLines: [{

                    value: ,

                    width: ,

                    color: '#808080'

                }]

            },

            tooltip: {

                valueSuffix: '°C'

            },

            legend: {

                layout: 'vertical',

                align: 'right',

                verticalAlign: 'middle',

                borderWidth:

            },

            series: series

        });

    }

</script>

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

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

HighChat动态绑定数据 数据后台绑定（三）的更多相关文章

  1. HighChat动态绑定数据 数据后台绑定（四）

    后台绑定数据,直接返回json数据 IList<SummaryHour> adHourData = summarybll.FindList(str); List<, , , , , ...

  2. HighChat 动态绑定数据记录

    最近刚开始做图形操作,纠结了一上午,highchat 动态绑定数据这块一直不知道怎么绑定,后来多次尝试,发现 1.x轴的数据是个数组格式,我从后台传到前台的时候,js中用数组进行处理数据,然后赋值到c ...

  3. GridView后台绑定数据列表方法

    在很多时候数据绑定都是知道了数据表中的表字段来绑定GridView控件的,那时候我就有个想法希望通过表明来查询数据库中的字段来动态的绑定GirdView控件数据并提供了相关的操作列,在网上找了一些资料 ...

  4. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  5. 利用ajax的方式来提交数据到后台数据库及交互功能

    怎么样用ajax来提交数据到后台数据库,并完成交互呢????? 一.当我们在验证表单的时候,为了阻止把错误的也发送到服务器,我们通常这样设置:     $(function(){       var ...

  6. CYQ.Data 支持WPF相关的数据控件绑定.Net获取iis版本

    CYQ.Data 支持WPF相关的数据控件绑定(2013-08-09) 事件的结果 经过多天的思考及忙碌的开发及测试,CYQ.Data 终于在UI上全面支持WPF,至此,CYQ.Data 已经可以方便 ...

  7. 利用object.defineProperty实现数据与视图绑定

    如今比较火的mvvm框架,例如vue就是利用es5的defineProperty来实现数据与视图绑定的,下面我来介绍一下defineProperty的用法. var people= {} Object ...

  8. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  9. Docker数据卷Volume实现文件共享、数据迁移备份（三）--技术流ken

    前言 前面已经写了两篇关于docker的博文了,在工作中有关docker的基本操作已经基本讲解完了.相信现在大家已经能够熟练配置docker以及使用docker来创建镜像以及容器了.本篇博客将会讲解如 ...

随机推荐

  1. typeof运算对于null会返回“Object"

    您也许会问,为什么 typeof 运算符对于 null 值会返回 "Object".这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了.现 ...

  2. Python之flask框架2

    Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务.本文参考自Flask官方文档,大部分代码引用自官方文档. 安装flask 首先我们来安装F ...

  3. shell 之for循环几种写法

    参见博客 http://blog.csdn.net/babyfish13/article/details/52981110 ,此博客写的非常清晰明了.

  4. Mybatis ResultMap多表映射DTO

    解决问题:n+1问题,之前我的习惯是拿到单表里面的数据,然后遍历,再拿到一个与其他表对应的逻辑上的外键,然后for循环去查找其他表的数据(原因是数据量小,没有在意,还有主要是不想建外键,你知道的,外键 ...

  5. 洛谷 U86564 排队形

    洛谷 U86564 排队形 题目传送门 题目背景 \(JDFZ2019\)秋季运动会开始辣!为了使强大的高一 · \(6\)班有一个更好的精神面貌,班主任\(T\)老师和体委\(LY\),\(LYB\ ...

  6. ibatis<iterate>标签

    <iterate  property="" 从传入的参数集合中使用属性名去获取值,   这个必须是一个List类型,   否则会出现OutofRangeException, ...

  7. NOIP201110观光公交

    题目描述 Description 风景迷人的小城Y市,拥有n个美丽的景点.由于慕名而来的游客越来越多,Y市特意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光公交车在第0分钟出现在1号景点,随后 ...

  8. 【转】jsp 页面 按回车键 触发事件

    转载: https://blog.csdn.net/ludongshun2016/article/details/59536779. 第一种: <script type="text/J ...

  9. [LeetCode] 301. Remove Invalid Parentheses 移除非法括号

    Remove the minimum number of invalid parentheses in order to make the input string valid. Return all ...

  10. 使用PAC文件来管理代理连接

    生成PAC文件 谷歌浏览器插件商店安装SwitchyOmega,找到立即更新模式,然后导出PAC文件 使用PAC文件 pac采用js编写 Windows Windows上面使用PAC文件很简单,新建一 ...