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. ProDinner

    ylbtech-dbs:ProDinner A, 数据库关系图 返回顶部 4, 点餐关系图 3, 留言图 1, 用户角色关系图 0, B,SQL脚本返回顶部 2, use master go --ki ...

  2. swift3.0:CoreData的使用

    一.介绍 CoreData不像slqite3那样编写代码繁琐,同时避免了使用了SQL语句的麻烦,也可以回避使用C语言的语法,降低了iOS开发的技术门槛. CoreData可降低开发成本,提高代码质量. ...

  3. Ajax核心技术之XMLHttpRequest

    Ajax:即"Asynchronous JavaScript and XML"(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRe ...

  4. 【Scala】Scala-case-参考资料

    Scala-case-参考资料 scala case_百度搜索 Scala School - 基础知识(续) scala case匹配值 - CSDN博客 scala入门教程:scala中的match ...

  5. 论文分享|《Universal Language Model Fine-tuning for Text Classificatio》

    https://www.sohu.com/a/233269391_395209 本周我们要分享的论文是<Universal Language Model Fine-tuning for Text ...

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

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

  7. wifidog 源码初分析(3)-转

    上一篇分析了 接入设备 在接入路由器,并发起首次 HTTP/80 请求到路由器上时,wifidog 是如何将此 HTTP 请求重定向至 auth-server 的流程. 之后 接入设备 的浏览器接收到 ...

  8. Spring中的代理模式

    代理模式 所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 代理模式是一种 ...

  9. [Docker] Building a Node.js Image

    Create a Dockerfile: FROM node:latest MAINTAINER Zhentian Wan ENV NODE_ENV=production ENV PORT= COPY ...

  10. 【python】安装bencode

    C:\Users\horn1\Desktop\python\35-pytorrent>pip install bencodeCollecting bencode Downloading http ...