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. 关于NLP和深度学习,准备好好看看这个github,还有这篇介绍

    这个github感觉很不错,把一些比较新的实现都尝试了: https://github.com/brightmart/text_classification fastText TextCNN Text ...

  2. ArcGisServer根据最大最小坐标换算瓦片行列号【转】

    1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端显示地图有什么关联呢?这一节,我会尽量详细的将这两个问题 ...

  3. Js组件的一些写法

    首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, argu ...

  4. background: inherit制作倒影、单行居中两行居左超过两行省略

    1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...

  5. Android -- setWillNotDraw()

    干货 处理onDraw()方法不被执行的解决方法: setWillNotDraw(false); 官方文档的解释: If this view doesn't do any drawing on its ...

  6. 学习世界模型,通向AI的下一步:Yann LeCun在IJCAI 2018上的演讲

    https://baijiahao.baidu.com/s?id=1606296521706399213&wfr=spider&for=pc 机器之心整理,机器之心编辑部. 人工智能顶 ...

  7. JAVA-MyBatis ORM

    MyBatis 的前身就是 iBatis .是一个数据持久层(ORM)框架. iBATIS一词来源于“internet”和“abatis”的组合,是一个基于Java的持久层框架.iBATIS提供的持久 ...

  8. easyui datagrid实现拖动表头

    $.extend($.fn.datagrid.methods, { columnMoving: function (jq) { return jq.each(function () { var tar ...

  9. (纪录片)你必须知道的科学 The Science That You Have To Know (2014)

    简介: 类型: 纪录片制片国家/地区: 英国语言: 英语上映日期: 2014-2片长: 150分钟 主要内容: 你有没有认真想过,自己的身体有多奇妙?人体是世间最复杂的一项工程杰作,他也带来了一些非常 ...

  10. (纪录片)数学的故事 The Story of Maths (2008)

    简介: 导演: Robin Dashwood编剧: Marcus du Sautoy主演: Marcus du Sautoy类型: 纪录片官方网站: www.bbc.co.uk/programmes/ ...