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

不多说看代码

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. centos7-cockpit

    yum install cockpit* -y systemctl start cockpit.service systemctl enable cockpit.service 修改默认端口9090 ...

  2. day21_7.25 面向对象之继承

    一.继承 什么是继承? 继承是一种关系,就是描述两者之间什么是什么的关系. 在程序中,继承描述的是类与类之间的关系. 例如a如果继承了b,a就具备了b的所有变量与方法,可以直接调用. class B: ...

  3. Tomcat的下载和安装

    登录Tomcat 站点,下载Tomcat最新版本http://tomcat.apache.org/Windows平台下载ZIP包,LInux平台下载TAR包,不建议下载安装文件,因为安装文件的 Tom ...

  4. Mybatis-Plus 代码生成器基本使用

    Mybatis-Plus 代码生成器基本使用 参考 https://mp.baomidou.com/guide/generator.html#%E4%BD%BF%E7%94%A8%E6%95%99%E ...

  5. LG1155 「NOIP2008」双栈排序 二分图判定

    问题描述 LG1155 题解 \(i,j\)如果不能进入一个栈,要满足存在\(k\),使得\(i<j<k\)且\(a_k<a_i<a_j\) 如果\(i,j\)不能进入一个栈, ...

  6. javaweb监听器实现与原理

    参考:https://www.cnblogs.com/lxp503238/p/6678688.html https://blog.csdn.net/CPOHUI/article/details/888 ...

  7. 微信小程序入门笔记

    目录的作用: 1. pages目录: 该目录下存放所有的定义页面 2. utils目录: 该目录下存放定义的一些小功能组件 3. 根目录下app.js文件: 定义小程序对象, 执行小程序生命周期内的各 ...

  8. 洛谷p3385【模板】负环

    最近很久没怎么写最短路的题导致这个题交了好多遍 AC率是怎么下来的自己心里没点数 SPFA虽然臭名昭著但是他可以用来判负环 如果一个点进队的次数大于等于n说明存在负环 这道题一开始memset我给di ...

  9. [LeetCode] 909. Snakes and Ladders 蛇梯棋

    On an N x N board, the numbers from 1 to N*Nare written boustrophedonically starting from the bottom ...

  10. Python爬取豆瓣电影top

    Python爬取豆瓣电影top250 下面以四种方法去解析数据,前面三种以插件库来解析,第四种以正则表达式去解析. xpath pyquery beaufifulsoup re 爬取信息:名称  评分 ...