Javascript 正在导出图表而不保留Navigator系列

我们正在从HighStock 5升级到HighStock 6.1。我们允许用户在股票图表上只显示一个系列（在任何数量的可能系列中）。当用户单击图例中的序列时，我们隐藏所有其他序列，只显示单击的序列。我们还将

navigator.series

更改为所选系列：

plotOptions: {
  series: {
    turboThreshold: 0,
    connectNulls: false,
    dataGrouping: {
      enabled: false
    },
    events: {
      legendItemClick: function(event) {
        var currChart;
        var pnlChartExport;
        var pnlNoChartExport;
        var divNoChartExport = $('[id$=divNoExportSupp]');
        var thisSeries = this,
          chart = this.chart;
        if (this.visible === true) {
          this.hide();
          chart.get("highcharts-navigator-series").hide();
        } else {
          this.show();
          chart.series.forEach(function(el, inx) {
            if (el !== thisSeries) {
              el.hide();
            }
          });
          chart.get("highcharts-navigator-series").setData(thisSeries.options.data, false);
          chart.get("highcharts-navigator-series").show();
          chart.setTitle({
            text: thisSeries.options.name
          }, undefined, false);
          var points = [];
          var minVal = 0.000;
          thisSeries.options.data.forEach(function(theData) {
            points.push(theData.y);
          });
          minVal = Math.min.apply(Math, points);
          if (minVal >= 0) {
            chart.yAxis[0].update({
              min: 0
            });
          } else {
            chart.yAxis[0].update({
              min: undefined
            });
          }
          currChart = thisSeries.userOptions.chartLoc;
        }
        event.preventDefault();
      }
    }
  }
}

然后，当我们导出图表时（通过外部按钮仍然调用

chart.exportChart

），我们得到当前显示的系列和导航器系列，并附加一些其他信息（页脚文本等）

在HighStock 5下，这很好。但是，现在除了最初加载的系列之外，它不会显示任何导出的navigator系列-navigator窗口不显示任何点

---

在HighStock v6下，如何在导出时使用navigator series=visible series保持相同的结果？这是一个包含数据和所有选项的实时视图。

此时，您不需要在

navigator.series

中为您在图表配置对象中定义的每个系列定义单独的系列，因为Highcharts将根据

series.showInNavigator

标志自行完成此操作。正确实现这一点的最佳和最快方法是定义简单的逻辑实现，在

legendItemClick

事件中使用

update

适当的系列。那么您的导出应该正常工作。请看下面的代码和示例：

  plotOptions: {
    series: {
      events: {
        legendItemClick(e) {
          e.target.chart.series.forEach(s => {
            if (s === e.target) {
              s.update({
                showInNavigator: true,
                visible: !s.visible
              })
            } else if (s.name.split(" ")[0] !== "Navigator") {
              s.hide()
              s.update({
                showInNavigator: false
              })
            }
            e.preventDefault()
          })

        }

      }

    }
  }

现场示例：

API参考：

[编辑]

由于以下代码行的原因，图表的所有系列都隐藏在导出的文件中：

  events: {
    load: function() {
      this.series.forEach(function(el) {
        if (el.index !== 0) {
          el.hide();
        }
      });
      this.get("highcharts-navigator-series").show();
    }
  }

---

不要忘记导出时也会触发

load

事件处理程序，这就是为什么需要删除这些代码行。那么它应该可以按照您的意愿工作。

这更接近了。现在，导出显示的是navigator系列，而不是主系列。查看我的chartExportLoc函数-在这里，我们更改了图表标题和其他属性。因为您需要从导出配置对象中删除

系列

和

导航器

定义，并将其作为参数传递给

exportChart（）

函数。我已经完成了这项操作。请参阅更新的JSFIDLE：问题是

图表.events.load

。删除了该选项，图表在页面和导出中的行为符合预期。是的，我在您回答时添加了注释。非常感谢你！

  events: {
    load: function() {
      this.series.forEach(function(el) {
        if (el.index !== 0) {
          el.hide();
        }
      });
      this.get("highcharts-navigator-series").show();
    }
  }