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

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. easy-copy服务器文件拷贝简易小工具

    github:easy-copy import os import sys import time import paramiko as pm ''' host格式: { "ip" ...

  2. 从Sources构建nginx，编译安装nginx

    从Sources构建nginx 使用configure命令配置构建,定义了系统的各个方面,包括允许nginx用于连接处理的方法,最后创建了一个Makefile. configure命令参数: --he ...

  3. Java同步和异步，阻塞和非阻塞

    同步和异步.阻塞和非阻塞 同步和异步关注的是消息通信机制. 同步是指: 发送方发出数据后, 等待接收方发回响应后才发下一个数据包的通讯方式. 就是在发出一个调用时, 在没有得到结果之前, 该调用就不返 ...

  4. 201871010106-丁宣元 《面向对象程序设计（java)》第六—七周学习总结

    201871010106-丁宣元 <面向对象程序设计(java)>第六—七周学习总结 正文开头 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu- ...

  5. Maven 依赖范围 scope 属性详解

    依赖范围就是用来控制依赖与三种 classpath(编译 classpath.测试 classpath.运行 classpath)的关系. 依赖范围(scope) 对于编译 classpath 有效 ...

  6. Codeforces Round #606 (Div. 2, based on Technocup 2020 Elimination Round 4) 题解

    Happy Birthday, Polycarp! Make Them Odd As Simple as One and Two Let's Play the Words? Two Fairs Bea ...

  7. TCP/UDP通信中server和client是如何知道对方IP地址的

    在TCP通信中 client是主动连接的一方,client对server的IP的地址提前已知的.如果是未知则是没办法通信的. server是在accpet返回的时候知道的,因为数据包中包含客户端的IP ...

  8. Linux ssh 密钥创建与验证

    1.需要两个虚拟机,每一个创建一个用户登录到用户根下   2.每个用户都要创建密钥对   3.把两个用户的公用密钥用ssh-copy-id -i 命令将公用的密钥复制到另一个用户中   4.在客户端开 ...

  9. redis-安装卸载

    1.安装service服务 redis-server --service-install [配置文件位置,如:redis.conf] (--service-name 服务名称) 2.启动service ...

  10. django实战（三）--删除和批量删除

    上一节我们完成了带分页的模糊查询,本节我们继续删除操作. 同样的,先给出各个模块的代码(上一节的就不在贴出了):urls.py path('curd/delete/',views.curd_delet ...