zoukankan      html  css  js  c++  java
  • HighStock如何动态添加数据组

    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();
                }
            }

  • 相关阅读:
    前端开发小结(持续更新)
    UDP 通讯及内部分析(合集)
    困扰我三天的问题
    Clang Format Style Options (.clang-format 配置文件文档)
    关于共享库的那些事儿
    如何在VMWare的NAT模式下使用traceroute(解析vmnat的行为)
    Linux网络配置
    Ansible Ad-Hoc命令集
    Ansible基础使用
    Ansible部署及配置介绍
  • 原文地址:https://www.cnblogs.com/onetwo/p/6145383.html
Copyright © 2011-2022 走看看