HighStock如何动态添加数据组

2024-10-18 22:38:50

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

最新文章

热门文章