时间戳

首页 > 解决方案 > 决定哪个系列进入范围选择器 highstock

javascript - 决定哪个系列进入范围选择器 highstock

问题描述

我有一个包含 3 个不同系列的图表，并且包含了 Highstock 的范围选择器。我希望能够选择 3 系列中的哪一个是 Range-Selector 中的一组。有没有办法将系列动态分配给范围选择器？

我用这样的 3 个系列创建图表：

//A,B,C data array
Highcharts.stockChart('container', {
    series: [
      { data: A },
      { data: B },
      { data: C }
    ]
});

我想要完成的是能够选择 A、B 或 C 作为系列活动以在 Range-Selector 预览中查看。

这是一个 jsfiddle：https ://jsfiddle.net/usvonfjh/1/

标签： javascripthighchartsreact-highcharts

解决方案

您可以通过设置在导航器中显示每个系列series.line.showInNavigator = true。要动态设置它series.update()，请使用可以为系列传递新选项的方法。

代码：

let dates = [1496268000000, 1504216800000, 1512082800000, 1519858800000, 1527804000000, 1535752800000, 1543618800000, 1551394800000, 1559340000000, 1567288800000];

let aSerie = dates.map((e, i) => [e, i < 5 ? null : i]);
let bSerie = dates.map((e, i) => [e, i + 1]);
let cSerie = dates.map((e, i) => [e, i * 2]);

Highcharts.stockChart('container', {
  chart: {
    events: {
      load: function() {
        const chart = this;

        setTimeout(() => {
          chart.series[1].update({
            showInNavigator: false
          });
        }, 2000);
      }
    }
  },
  rangeSelector: {
    verticalAlign: 'top'
  },
  series: [{
    name: "aSerie",
    showInNavigator: true,
    data: aSerie
  }, {
    name: "bSerie",
    showInNavigator: true,
    data: bSerie
  }, {
    name: "cSerie",
    showInNavigator: true,
    data: cSerie
  }]
});

演示：

API参考：

推荐阅读