也是对最近几天的折线图搞得烦心，看了好多前辈的文章，也总结了一下。

1.先看后台程序，这是我模拟的一些参数 就是一个字符串。没啥好说的

 public ActionResult Index2()

        {

            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" };

            double[] V1 = { 4.3, 1.2, 1.3, 1.6, 7.6, 5.9, 9.0, , ,  };

            double[] V2 = { 5.3, 1.9, 1.3, 1.4, 7.6, 0.4, 9.0, , ,  };

            string json = "{\"rows\":[";

            for (int i = ; i < key.Count(); i++)

            {

                json += "{\"atrname\":\"" + key[i] + "\",\"clickvalue\":\"" + V1[i] + "\",\"impvalue\":\"" + V2[i] + "\"},";

            }

            json = json.TrimEnd(',');

            json += "]}";

            return Content(json);

        }

2.主要是前台的数据绑定

第一种方式：

1.其中头文件中加了 no-data-to-display.src.js  这个文件，表示如果在没有数据的时候会自动显示  暂无数据

  lang: { noData: "暂无数据" },

  legend: {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'middle',

            borderWidth: 0

       }

2.请注意看现在的 series: [{}] 的值是这样的，因为如果是[]，这样就不会有数据显示  用这种方式显示数据的时候
//这种方式必须默认有数据的时候才能显示

 oOptions.series[0].name = "第三条";

 oOptions.series[0].data = clickvalue;
3.var oSeries = {
                //    name: "第二条",

                //    data: clickvalue

                //};

                //oChart.addSeries(oSeries);

   用这种方式 赋值的时候 series: [{}] 这样的时候，虽然显示一条折线图，但是右边会显示一个折线的表示。series:[] 这样就不会显示
   用这种方式赋值的时候//oChart = new Highcharts.Chart(oOptions); 要去掉 或者 放到上面执行。
4.第三种方式 series:[] 或者series:[{}]都可以实现

@{

    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/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">

    var oChart = null;

    var oOptions = {

        chart: {

            renderTo: 'container', //设置显示的页面块

            type: 'line'

        },

        //图标标题

        title: {},

        credits: { enabled: false },

        tooltip: { shared: true },

        lang: { noData: "暂无数据" },

        legend: {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'middle',

            borderWidth:

        },

        //x轴

        xAxis: { title: {} },

        //y轴

        yAxis: { title: {} },

        //数据列

        series: []

    };

    $(document).ready(function () {

        oChart = new Highcharts.Chart(oOptions);

        requestData();

    });

    //新的折线图

    function requestData() {

        oChart.showLoading();

        $.ajax({

            url: '/Home/Index2',

            type: 'POST',

            dataType: 'json',

            async: false, //同步处理后面才能处理新添加的series

            data: null,

            success: function (rntData) {

                var xatrnames = [];

                var clickvalue = [];

                var impvalue = [];

                for (var i = ; i < rntData.rows.length; i++) {

                    xatrnames.push([

                      rntData.rows[i].atrname

                    ]);

                    clickvalue.push([

                      parseFloat(rntData.rows[i].clickvalue)

                    ]);

                    impvalue.push([

                     parseFloat(rntData.rows[i].impvalue)

                    ]);

                }

                alert(xatrnames + clickvalue);

                oOptions.title.text = "标题";

                oOptions.xAxis.title.text = "x轴标题";

                oOptions.xAxis.categories = xatrnames;//x轴数据

                //这种方式必须默认有数据的时候才能显示

                oOptions.series[].name = "第三条";

                oOptions.series[].data = clickvalue;

                //必须有2条线的时候才会显示

                oOptions.series[].name = "第三条";

                oOptions.series[].data = clickvalue;

                //这种方式为添加，每次只能添加一条

                //var oSeries = {

                //    name: "第二条",

                //    data: clickvalue

                //};

                //oChart.addSeries(oSeries);

                //此处可以用循环写入也可以的 循环赋值多个可以从0开始

                //oOptions.series = new Array();

                //oOptions.series[0] = new Object();

                //oOptions.series[0].name = "点击";

                //oOptions.series[0].data = clickvalue;

                //oOptions.series[1] = new Object();

                //oOptions.series[1].name = "展示";

                //oOptions.series[1].data = impvalue;

                //第二种方式的时候要去掉，或者放到上面先执行

                //oChart = new Highcharts.Chart(oOptions);

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

            }

        });

        oChart.hideLoading();

    }

</script>

后面我会把我的demo放上去 希望有错误的地方大家可以指正我，共同进步

下载链接：http://pan.baidu.com/s/1jHYFjE2

 

HighChat 动态绑定数据（二）的更多相关文章

  1. HighChat 动态绑定数据记录

    最近刚开始做图形操作,纠结了一上午,highchat 动态绑定数据这块一直不知道怎么绑定,后来多次尝试,发现 1.x轴的数据是个数组格式,我从后台传到前台的时候,js中用数组进行处理数据,然后赋值到c ...

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

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

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

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

  4. dev checkedlistbox动态绑定数据

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

  5. eCharts 折线图，动态绑定数据不更新图表的问题，

    官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...

  6. bootstrap selectpicker 通过代码指定选中值 BootStrap selectpicker后台动态绑定数据 selectpicker 获取选中option的属性或者值

    bootstrap-select使用 bootstrap selectpicker 通过代码指定选中值 $('#subjectno').selectpicker('val',(row.subjectn ...

  7. bootstrap select下拉框模糊搜索和动态绑定数据解决方法

    此方法适合后台一次性返回所有数据好了废话不多说直接上代码: <!DOCTYPE html><html><head> <title>Bootstrap-s ...

  8. (转).net控件dropdownlist动态绑定数据

    DropDownList控件的使用(数据绑定)(.net学习笔记二)(2006-10-12 07:28:49) 转载   分类:.net学习笔记 一.在页面初始化时候将集合绑定到DropDownLis ...

  9. .net控件dropdownlist动态绑定数据 ----转

    DropDownList控件的使用(数据绑定)(.net学习笔记二) 一.在页面初始化时候将集合绑定到DropDownListpublic void Page_Load(Object src.Even ...

随机推荐

  1. pikachu 文件包含，上传，下载

    一.文件包含 1.File Inclusion(local) 我们先测试一下,选择kobe然后提交 发现url出现变化 可以猜测此功能为文件包含,包含的文件为 file1.php,所以我在此盘符的根目 ...

  2. USACO wormhole

    洛谷 P1444 [USACO1.3]虫洞wormhole https://www.luogu.org/problemnew/show/P1444 JDOJ 2386: USACO 2013 Dec ...

  3. Burst Balloons（leetcode戳气球，困难）从指数级时间复杂度到多项式级时间复杂度的超详细优化思路（回溯到分治到动态规划）

    这道题目做了两个晚上,发现解题思路的优化过程非常有代表性.文章详细说明了如何从回溯解法改造为分治解法,以及如何由分治解法过渡到动态规划解法.解法的用时从 超时 到 超过 95.6% 提交者,到超过 9 ...

  4. 跨交换机VLAN之间的通信（基于Cisco模拟器）

    实验要求: 拓扑结构如下 1.交换机2台:主机4台:网线若干. 2.把主机.交换机进行互联. 3.给2台交换机重命名为A.B. 4.设置2台交换机及主机的ip.注意IP要不冲突 5.在2台交换机上分别 ...

  5. 清理C盘临时文件脚本

    @echo off echo 正在清除系统垃圾文件,请稍等...... del /f /s /q %systemdrive%\*.tmp del /f /s /q %systemdrive%\*._m ...

  6. 数据结构——顺序栈（sequence stack）

    /* sequenceStack.c */ /* 栈 先进后出(First In Last Out,FILO)*/ #include <stdio.h> #include <stdl ...

  7. Linux性能优化实战学习笔记：第五十四讲

    一.上节回顾 上一节,我带你学习了,如何使用 USE 法来监控系统的性能,先简单回顾一下. 系统监控的核心是资源的使用情况,这既包括 CPU.内存.磁盘.文件系统.网络等硬件资源,也包括文件描述符数. ...

  8. 喜欢去知乎炸鱼?用python吧

    知乎高赞贴: 有一双大长腿是什么体验? 有一副迷人的身材是什么体验? 别用手机费劲的翻了,python帮你一臂之力 import re import requests import os import ...

  9. 热情组——项目冲刺 Day4

    项目相关 作业相关 具体描述 班级 班级链接 作业要求 链接地址 团队名称 热情组 作业目标 实现软件制作,以及在福大的传播 Github链接 链接地址 SCRUM部分: 成员昵称 昨日目标 开始时间 ...

  10. [转载]3.12 UiPath存在元素Element Exists的介绍和使用

    一.Element Exists的介绍 使您能够验证UI元素是否存在,即使它不可见,输出的是一个布尔值 二.Element Exists在UiPath中的使用 1.打开设计器,在设计库中新建一个Seq ...