最近刚开始做图形操作，纠结了一上午，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. Grafana数据迁移

    各系统和docker安装官方文档 https://grafana.com/grafana/download?platform=linux ubuntu安装相应版本的Grafana wget https ...

  2. 笔记14：Docker 部署Python项目

    Docker 部署Python项目 导读: 软件开发最大的麻烦事之一就是环境配置,操作系统设置,各种库和组件的安装.只有它们都正确,软件才能运行.如果从一种操作系统里面运行另一种操作系统,通常我们采取 ...

  3. src和href 如何做好seo 前端页面有那三层 AMD和CMD 规范的区别 渐进增强

    1==>简述一下src与href的区别 src用于替换当前元素: href用于在当前文档和引用资源之间确立联系 2==>.谈谈以前端角度出发做好SEO需要考虑什么? a. 了解搜索引擎如何 ...

  4. SDL2学习(一): 显示一张图片

    SDL是一个跨平台的多媒体库,它通过OpenGL和2D视频帧缓冲,提供了针对音频.视频.键盘.鼠标.控制杆及3D硬件的低级别的访问接口.这里使用较新的SDL2库. 1. 配置SDL开发环境 1.1 下 ...

  5. python函数中的不定长参数

    python自定义函数中有两中不定长参数,第一种是*name,第二种是**name.加了星号 * 的参数会以元组(tuple)的形式导入,存放所有未命名的变量参数.加了两个星号 ** 的参数会以字典的 ...

  6. No archetypes currently available. The archetype list will refresh when the indexes finish updating

    配置方法: 1. 在卡住的而画面点击"config" 2. 点击"Add remote catalog", 然后设置华为云的maven仓库地址, 然后点击&qu ...

  7. 虚拟机使用配置固定IP

    首先打开虚拟机 打开xshell5连接虚拟机(比较方便,这里默认设置过Linux的ip,只是不固定) 输入ifconfig,可以查看网管相关配置信息: 然后输入    vi /etc/sysconfi ...

  8. 69.x的平方根 （平）（简单）

    实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: 4输出: 2示例 2: ...

  9. shell脚本的输入以及脚本拥有特效地输出

    shell脚本的输入以及脚本拥有特效地输出 shell脚本输入之read命令 之前是直接在sh 后加参数 现在是另一种方式 语法:read -参数 -p:给出提示符.默认不支持"\n&quo ...

  10. VIJOS-P1201 高低位交换

    洛谷 P1100 高低位交换 https://www.luogu.org/problemnew/show/P1100 JDOJ 1349: VIJOS-P1201 高低位交换 https://neoo ...