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

不多说看代码

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. ConcurrentSkipListMap的常用方法

    package com.geo.map;  import java.util.Iterator;import java.util.Map.Entry;import java.util.Set;impo ...

  2. Vuex操作步骤

    概念流程图: 案例: (1)src/store/index.js导出仓库 (2)在入口文件引入仓库并派发到每个组件,在入口文件main.js引入,挂载到根组件上,方便以后使用this.$store调用 ...

  3. python开发微信公众号SDK选择

    1.wechat-sdk sudo pip install wechat-sdk 文档地址:  http://ww2.wechat-python-sdk.com/ 2.wechat sudo pip ...

  4. Spring(004)-Bean装配

    一,问题,Bean找不到 代码 @Component public class DemoClass { public int doSth() { ; } } 测试代码 @RunWith(SpringJ ...

  5. 201871010105-曹玉中《面向对象程序设计（java）》第十四周学习总结

    201871010105-曹玉中<面向对象程序设计(java)>第十四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  6. Hive学习之修改表、分区、列

    Hive学习之修改表.分区.列 https://blog.csdn.net/skywalker_only/article/details/30224309 https://www.cnblogs.co ...

  7. tornado之获取参数

    self.write()  # 返回字符串 self.redirect()  # 重定向 self.render()  # 返回html页面 一. 获取url中携带的参数, 如: 127.0.0.1: ...

  8. 字段加密实践(django-fernet-fields)

    一.fernet介绍 Fernet 用于django模型字段对称加密,使用 crytography 库. 官网帮助文档 1.先决条件 django-fernet-fields 支持Django 1.8 ...

  9. [LeetCode] 623. Add One Row to Tree 二叉树中增加一行

    Given the root of a binary tree, then value v and depth d, you need to add a row of nodes with value ...

  10. [LeetCode] 527. Word Abbreviation 单词缩写

    Given an array of n distinct non-empty strings, you need to generate minimal possible abbreviations ...