var charts = null;
        $(function () {
            var seriesIds = [830];
            // Create the chart
            charts = new Highcharts.StockChart({
                chart: {
                    renderTo: 'container',
                    borderWidth: 1 //边框宽度
                },
                exporting: {
                    enabled: true //是否能导出趋势图图片  
                },
                title: {
                    text: "AAPL Stock Price(报名统计)", //图表标题  
                    floating: true
                },
                xAxis: {
                    tickPixelInterval: 200,
                    labels: {
                        align: 'center'
                    },
                    dateTimeLabelFormats: {
                        second: '%Y-%m-%d-%H:%M:%S',
                        minute: '%Y-%m-%d-%H:%M',
                        hour: '%Y-%m-%d-%H:%M',
                        day: '%Y-%m-%d',
                        week: '%Y-%m-%d',
                        month: '%Y-%m',
                        year: '%Y'
                    }
                },
                yAxis: {
                    title: {
                        text: "Rate(个数)"  //y轴上的标题  
                    },
                    labels: {
                        //设置纵坐标值的样式 
                        formatter: function () {
                            return this.value + "个";
                        }
                    }
                },
                rangeSelector: {
                    // 缩放选择按钮,是一个数组。
                    // 其中type可以是: 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
                    // 其中count是指多少个单位type。
                    // 其中text是配置显示在按钮上的文字
                    buttons: [{
                        type: 'month',
                        count: 1,
                        text: '1月'
                    }, {
                        type: 'month',
                        count: 3,
                        text: '季度'
                    }, {
                        type: 'year',
                        count: 1,
                        text: '1年'
                    }, {
                        type: 'all',
                        text: '全部'
                    }],
                    //表示以上定义button的index,从0开始
                    selected: 1,
                    //日期输入框中格式
                    inputDateFormat: '%Y-%m-%d'
                },
                tooltip: {
                    xDateFormat: '%Y-%m-%d, %A'//鼠标移动到趋势线上时显示的日期格式  
                },
                series: [],
                //底部滑轮控制
                navigator: {
                    xAxis: {
                        tickPixelInterval: 200,
                        labels: {
                            align: 'right'
                        },
                        dateTimeLabelFormats: {
                            second: '%Y-%m-%d-%H:%M:%S',
                            minute: '%Y-%m-%d-%H:%M',
                            hour: '%Y-%m-%d-%H:%M',
                            day: '%Y-%m-%d',
                            week: '%Y-%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        }
                    }
                }
            });

$.each(seriesIds, function (j, pid) {
                $.ajax({
                    type: "post",
                    url: "retrunJsonStr.ashx",
                    async: false,
                    dataType: "text",
                    data: { pid: pid },
                    success: function (json) {
                        charts.addSeries({
                            name: pid,
                            type: 'spline',
                            data: eval('(' + json + ')')
                        }, false);
                        charts.redraw(); //刷新
                    }
                });
            });
        });

function getChart(obj) {
            var pid = $(obj).val();
            var isCk = $(obj).attr("checked");
            if (isCk) {
                $.ajax({
                    type: "post",
                    url: "retrunJsonStr.ashx",
                    async: false,
                    dataType: "text",
                    data: { pid: pid },
                    success: function (json) {
                        charts.addSeries({
                            name: pid,
                            type: 'spline',
                            data: eval('(' + json + ')')

}, false);
                        charts.redraw();
                    }
                });
            } else {
                for (var i = 0; i < charts.series.length; i++) {
                    if (charts.series.name == pid) {
                        charts.series.remove(false);
                    }
                }
                charts.redraw();
            }
        }

HighStock如何动态添加数据组的更多相关文章

  1. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  2. 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解

    一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...

  3. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  4. 第27讲 UI组件之 ScrollView与底部动态添加数据

    第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...

  5. Android之ListView动态添加数据(SQLiteOpenHelper类添加数据)

    一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等 ...

  6. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  7. ASP.NET网页动态添加数据行

    一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...

  8. silverlight RadGridView 动态添加数据列

    public void BindFaultGridInfo(IList<HealthStatusApp.Web.Models.FaultMajorModel> list) { rg_Fau ...

  9. Layui表格之动态添加数据(表格多选解决方案)

    前言: Layui已经给出了多选记录的解决方案,是在每条数据的前面加上CheckBox,每次选择都有监听.效果是这样: 实现监听的代码如下,这是一种解决选择多条数据的方案: table.on('edi ...

随机推荐

  1. 《嵌入式系统原理与接口技术》——嵌入式系统接口应用基础

    本文为我负责编写的电子工业出版社出版的<嵌入式系统原理与接口技术>一书第七章部分,这里整理的仍然是修改稿,供需要的同学参考,本书为普通高等教育"十二五"规划教材,电子信 ...

  2. 5.2 dubbo-compiler源码解析

    ExtensionLoader<Protocol> loader = ExtensionLoader.getExtensionLoader(Protocol.class); final P ...

  3. Libxml2函数及使用方法概述【转】

    https://blog.csdn.net/chengwenyao18/article/details/7176082 一.关于XML: 在开始研究 Libxml2 库之前,先了解一下XML的相关基础 ...

  4. PL/SQL Developer执行.sql文件的几种方法

    1.复制SQL 第一种方法非常常见,也非常简单,先用文本编辑器打开.sql文件,然后把sql复制到PL/SQL Developer的SQL窗口或者命令窗口中运行就行了,本来我也是这么做的,但是我将SQ ...

  5. vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求

    问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...

  6. 泊松分布E(X^2)

    由于求期望实际就是求平均值,所以E(X^2)=E[X*X]=E[X*X]+E(X)-E(X)=E[X*X+X-X]=E[X(X-1)+X]E[X(X-1)+X]=E[X(X-1)]+E(X)即:和的平 ...

  7. capwap学习笔记——初识capwap(二)

    2.5.1 AC发现机制 WTP使用AC发现机制来得知哪些AC是可用的,决定最佳的AC来建立CAPWAP连接. WTP的发现过程是可选的.如果在WTP上静态配置了AC,那么WTP并不需要完成AC的发现 ...

  8. Git直接拉取远程分支

    用Git,一直有个疑惑,可不可以不拉取远程Origin主干,我直接pull一个分支下来 今天想了一下,找到了一个办法 本地分支关联 // 0.新建一个文件夹,然后初始化git git init // ...

  9. [幽默漫画]对于程序猿来说deadline很容易搞定!

     更多漫画在这里

  10. Google想出了一个决定人员晋升的算法,然后就没有然后了......

    Google 有点跑偏了,逗死我了~实践一下也好~ Prasad Setty 是 Google People Analytics 团队的副总裁.7 年前 Google 成立的这支团队的职责是收集和利用 ...