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. Understanding Linux CPU stats

    Your Linux server is running slow, so you follow standard procedure and run top. You see the CPU met ...

  2. [leetcode]Evaluate Reverse Polish Notation @ Python

    原题地址:https://oj.leetcode.com/problems/evaluate-reverse-polish-notation/ 题意: Evaluate the value of an ...

  3. TensorFlow教程——Bi-LSTM+CRF进行序列标注(代码浅析)

    https://blog.csdn.net/guolindonggld/article/details/79044574 Bi-LSTM 使用TensorFlow构建Bi-LSTM时经常是下面的代码: ...

  4. NLP--自然语言处理与机器学习会议

    http://blog.csdn.net/ice110956/article/details/17090061 整理至11月中旬在重庆参加的自然语言处理与机器学习会议,第一讲为自然语言处理. 由基本理 ...

  5. Python引用(import)文件夹下的py文件的方法

    Python的import包含文件功能就跟PHP的include类似,但更确切的说应该更像是PHP中的require,因为Python里的import只要目标不存在就报错程序无法往下执行.要包含目录里 ...

  6. 使用Snap.svg类库实现的抖动式的幻灯播放效果

    在线演示 本地下载 这个幻灯中,使用了SVG来生成具有动画弧度的幻灯背景效果,如果你在项目中能够支持现代浏览器的话,尝试一下这个效果吧,很赞! 想了解基础使用,观看这个轻视频吧:Snap.svg处理和 ...

  7. asp.net正则表达式类的定义

    using System; using System.Collections; using System.Reflection; using System.Reflection.Emit; using ...

  8. jQuery.cookie应用操作

    //1.插件框架: /* * name @键 * value @值 * options @选项,包括有效期 路径 域名等 */ jQuery.cookie = function(name, value ...

  9. LintCode: Combination Sum

    一个数可以使用多次 图: 节点:x(当前的和,当前要考虑的数a[i]) 边:x-> y1(当前的和,下一个要考虑的数a[i+1]) y2(当前的和+a[i],下一个要考虑的数a[i+1]) BF ...

  10. 树莓派中找不到/dev/video0的解决方案及RaspberryCam的使用

    一.原因 当使用CSI连接的方式将摄像头模块连接树莓派后,在/dev/中找不到video0,因此使用一些第三方库(如Opencv或RaspberryCam)去调用摄像头时,无法调用成功. 二.解决方法 ...