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

不多说看代码

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. 2019 China Collegiate Programming Contest Qinhuangdao Onsite

    传送门 D - Decimal 题意: 询问\(\frac{1}{n}\)是否为有限小数. 思路: 拆质因子,看是不是只包含2和5即可,否则除不尽. Code #include <bits/st ...

  2. 201871010124-王生涛《面向对象程序设计（java）》第十四周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  3. 源码解读：webdriver client的原理

    前言 又到年底了,群里很多朋友说要开始备战2020金三银四,其实,我建议是,如果你不是技术大牛,就不要去凑热闹. 其实,现在(11,12月份)就是最佳换工作的时候,因为很多人想等着拿了年终再走,虽然招 ...

  4. 【Spring AOP】通知（五）

    一.通知介绍 1. 前置通知(Before) 在目标方法执行之前执行的通知. 前置通知方法,可以没有参数,也可以额外接收一个JoinPoint,Spring会自动将该对象传入,代表当前的连接点,通过该 ...

  5. nginx 403问题

    错误排查 https://blog.csdn.net/onlysunnyboy/article/details/75270533 关闭 SELinux https://blog.csdn.net/ed ...

  6. Excel-数据透视表

    例如: 购买数量采用求和的方式 用户数ID数据采用计数的方式 一.数据透视表的结构 二.数据透视表的步骤 1.订单表 提出问题,理解数据,数据清晰,构建模型,数据可视化 问题1:每个客户的订单量? 问 ...

  7. [LeetCode] 21. Merge Two Sorted Lists 混合插入有序链表

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  8. Web协议详解与抓包实战：HTTP1协议-详解请求行（2）

    一.请求行一 二.请求行二 三.请求行三 四.常见方法(RFC7231) 实际测试截图 五.用于文档管理的 WEBDAV 方法(RFC2518) 六.WEBDAV 验证环境  1.登录  2.Wire ...

  9. [LeetCode] 327. Count of Range Sum 区间和计数

    Given an integer array nums, return the number of range sums that lie in [lower, upper] inclusive.Ra ...

  10. [LeetCode] 47. Permutations II 全排列之二

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...