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. RocketMQ logback使用实践

    logback_broker.xml <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed ...

  2. spring 配置文件 获取变量(PropertyPlaceholderConfigurer)

    转自:https://hbiao68.iteye.com/blog/2031006 1.Spring的框架中,org.springframework.beans.factory.config.Prop ...

  3. 解析eml文件

    之前使用lumisoft解析eml,总是会出现很奇怪的问题,所以改使用微软自家的com库,确实厉害兼容性更好,代码 string file = emailPath; CDO.Message oMsg ...

  4. [leetcode]Spiral Matrix II @ Python

    原题地址:https://oj.leetcode.com/problems/spiral-matrix-ii/ 题意: Given an integer n, generate a square ma ...

  5. caffe添加python数据层

    caffe添加python数据层(ImageData) 在caffe中添加自定义层时,必须要实现这四个函数,在C++中是(LayerSetUp,Reshape,Forward_cpu,Backward ...

  6. C++ stringstream格式化输出输入探索

    - 最近在笔试时经常遇见各种输入问题,于是细心总结一波: - 首先string str; cin>>str;遇到空格结束: - 于是乎产生了getline(),可与得到一行字符串:空格自动 ...

  7. Elasticsearch 入门教程

    全文搜索属于最常见的需求,开源的 Elasticsearch (以下简称 Elastic)是目前全文搜索引擎的首选. 它可以快速地储存.搜索和分析海量数据.维基百科.Stack Overflow.Gi ...

  8. 3d打印机的软件系统组成部分

    主要由计算机.应用软件.底层控制软件和接口驱动单元组成1)计算机一般采用上位机和下位机两级控制.其中上位主控机一般采用配置高.运行速度快的PC机:下位机采用嵌入式系统DSP,驱动执行机构.上位机和下位 ...

  9. PHP跨页面传递时session失效

    一直都是使用wamp作为本地的PHP集成开发环境 今天遇到一个很奇怪的问题,就是在跨页面传递时session竟然失效了,而之前从来没有出现过这种问题 因为使用的是开源的php框架为了测试方便就新建了两 ...

  10. (转)C#中的委托(Delegate)和事件(Event)

    转自:http://blog.chinaunix.net/uid-576762-id-2733751.html   把C#中的委托(Delegate)和事件(Event)放到现在讲是有目的的:给下次写 ...