最近刚开始做图形操作，纠结了一上午，highchat 动态绑定数据这块一直不知道怎么绑定，后来多次尝试，发现

1.x轴的数据是个数组格式，我从后台传到前台的时候，js中用数组进行处理数据，然后赋值到chat就不会报错，

2.y轴的数据和x轴数据还不一样，通过数组处理后发现还是无法显示。后来我在后台将数据添加了中括号[]括起来后，传到前台，然后前台在用eval()处理后就能够显示了

3.eval具有计算的功能，刚开始x轴的时候我用了eval对时间进行操作发现时间都是相减了，格式为：2017-07-27，格式居然为1998这样的。

下面是我的后台和前台的程序逻辑：

1.后台MVC控制器

1  public ActionResult Index()

2         {

3             return View();

4         }

5         public ActionResult GetAllReport()

6         {

7             var result = new { key = "2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02", value1 = "[9,23,24,54,67,1,23,45,23,444,55,89]", value2 = "[99,89,78,67,76,75,49,47,21,32,33,55]" };

8             return Json(result);

9         }

2.前台：

@{

    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="~/charts/highcharts/highcharts_jquery-1.8.3.min.js"></script>

</head>

<body>

    <div id="container">

    </div>

</body>

</html>

<script type="text/javascript">

    $(function () {

        $.ajax({

            url: '/Home/GetAllReport',

            dataType: "json",

            type: "POST",

            data: null,

            success: function (data) {

                alert(data.key);

                Chart(data.key, data.value1, data.value2);

            }, error: function (jqXHR, textStatus, errorThrown) {

                alert("出错");

            }

        });

    });

    function Chart(key, value1, value2) {

        var mycars = new Array();

        var myvalue1 = new Array();

        var myvalue2 = new Array();

        var _tkey = key.split(',');

        for (var i = 0; i < _tkey.length; i++) {

            mycars[i] = _tkey[i];

        }

        var _tvalue1 = value1.split(',');

        for (var i = 0; i < _tvalue1.length; i++) {

            myvalue1[i] = _tvalue1[i];

        }

        var _tvalue2 = value2.split(',');

        for (var i = 0; i < _tvalue2.length; i++) {

            myvalue2[i] = _tvalue2[i];

        }

        var chart = new Highcharts.Chart('container', {

            title: {

                text: '不同城市的月平均气温',

                x: -20

            },

            subtitle: {

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

                x: -20

            },

            xAxis: {

                categories: mycars

            },

            yAxis: {

                title: {

                    text: '温度 (°C)'

                },

                plotLines: [{

                    value: 0,

                    width: 1,

                    color: '#808080'

                }]

            },

            tooltip: {

                valueSuffix: '°C'

            },

            legend: {

                layout: 'vertical',

                align: 'right',

                verticalAlign: 'middle',

                borderWidth: 0

            },

            series: [{

                name: '东京',

                data: eval(value1)

            }, {

                name: '纽约',

                data: eval(value2)

            }]

        });

    }

</script>

另外呢还有一些 小处理

1.   2条折线重复的时候，鼠标放上去需要都显示数据

tooltip: {

shared: true

}

2.  去除highchat.com 网址

credits: {

 enabled: false

}

3. 刷新数据的时候 需要将上次的折线图清除

function clearTable() {

   var series = chart.series;

   if (series.length > 0) {

         series[0].remove(false);

     }

}

HighChat 动态绑定数据记录的更多相关文章

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

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

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

    今天看了几位大佬的博客,学到了一些,现在分享一下,也作为以后的参考 不多说看代码 1.后台代码 public ActionResult Ajax2() { ReportData reportData ...

  3. HighChat 动态绑定数据（二）

    也是对最近几天的折线图搞得烦心,看了好多前辈的文章,也总结了一下. 1.先看后台程序,这是我模拟的一些参数 就是一个字符串.没啥好说的 public ActionResult Index2() { s ...

  4. MySQL单表百万数据记录分页性能优化

    背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台经常报告超时,尤其是页码大的页面更是慢的不行. 测试环境: 先让我们熟悉下基本的sql语句,来查看下我 ...

  5. SQL Server 存储(2/8)：理解数据记录结构

    在SQL Server :理解数据页结构我们提到每条记录都有7 bytes的系统行开销,那这个7 bytes行开销到底是一个什么样的结构,我们一起来看下. 数据记录存储我们具体的数据,换句话说,它存在 ...

  6. MySQL 单表百万数据记录分页性能优化

    文章转载自:http://www.cnblogs.com/lyroge/p/3837886.html 背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台 ...

  7. dev checkedlistbox动态绑定数据

    最近在做项目的时候遇到个问题.用checkedlistbox控件绑定数据.在这里稍微总结一下. 其实动态绑定数据有两种方法下面说一下 1.通过数据源 DataTable dt=new DataTabl ...

  8. (转)ThinkPHP find方法 查询一条数据记录

    find() ThinkPHP find() 方法是和 select() 用法类似的一个方法,不同之处 find() 查询出来的始终只有一条数据,即系统自动加上了 LIMIT 1 限制. 当确认查询的 ...

  9. MySQL查询数据表中数据记录（包括多表查询）

    MySQL查询数据表中数据记录(包括多表查询) 在MySQL中创建数据库的目的是为了使用其中的数据. 使用select查询语句可以从数据库中把数据查询出来. select语句的语法格式如下: sele ...

随机推荐

  1. Hebye 深度学习中Dropout原理解析

    1. Dropout简介 1.1 Dropout出现的原因 在机器学习的模型中,如果模型的参数太多,而训练样本又太少,训练出来的模型很容易产生过拟合的现象. 在训练神经网络的时候经常会遇到过拟合的问题 ...

  2. 笔记8：Linux知识

    linux学习笔记 1 Linux介绍 1.1 基本知识 应用领域:服务器使用 LAMP(Linux + Apache + MySQL + PHP)或 LNMP(Linux + Nginx+ MySQ ...

  3. BCD解密

    #include<stdio.h> int main(void) { int num; scanf_s("%d", &num); printf( * + num ...

  4. flask的request如何获取参数

    1.request.form.get("key", type=str, default=None) 获取表单数据 2.request.args.get("key" ...

  5. c# 第五节 第一个控制台程序、第一个桌面、快捷键、注释

    本节内容: 1:控制台程序的创建 2:第一个桌面程序 3:快捷键 4:注释 一.第一个控制台程序: 这就是控制台程序: 打开你的vs2015,按如下操作 二.第一个桌面程序 比如当我们删除一个东西会弹 ...

  6. 第十二周博客作业 <西北师范大学| 周安伟>

    第十二周作业 助教博客链接https://home.cnblogs.com/u/zaw-315/ 作业要求链接https://www.cnblogs.com/nwnu-daizh/p/10831971 ...

  7. mybatis框架之多参数入参--传入Map集合

    需求:查询出指定性别和用户角色列表下的用户列表信息 实际上:mybatis在入参的时候,都是将参数封装成为map集合进行入参的,不管你是单参数入参,还是多参数入参,都是可以封装成map集合的,这是无可 ...

  8. Tableau 练习题

    1.练习一 1. 提出问题:对某个学校或者一个城市的教育水平进行评估,或者多个学校的教育水平进行比较 指标:学生考试成绩 根据考试成绩高低判断教育水平:影响因素:学生餐饮,从多个维度分析,各城市在不同 ...

  9. 3.Vue的基本语法

    1.v-bind 可简写为":" 你看到的 v-bind 等被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性. 我们可以使用 v-bind 来绑定元素特性! 在 ...

  10. 【转】为什么要重写hashcode()方法和toString()方法

    Object 类 包含toString()和hashCode()方法. 一.toString(): 在Object类里面定义toString()方法的时候返回的对象的哈希code码,这个hashcod ...