导出图表不保留导航器系列

Question

我们正在从 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 的外部按钮），我们得到当前显示的系列和导航器系列并附加一些其他信息（页脚文本等）。

function chartExportLoc(chartid, exportType, graphHeader, graphFooter, marginSize) {

    if (!marginSize) {
        marginSize = 15;    //HighCharts default
    }

    var chart = $('#' + chartid).highcharts();

    if (chartid == "chartStock") {
        var navigatorData = chart.get("highcharts-navigator-series").options.data;
        var chartSeries = chart.userOptions.series;

        chart.exportChart(
            {   type: exportType, scale: 1 },
            {
                title: { text: unescape(encodeURI(graphHeader)), margin: marginSize },
                navigator: {series: {data: navigatorData} },
                legend: { y: -6 },
                subtitle: { y: 3, text: unescape(encodeURI(graphFooter)) },
                chart: { spacingBottom: 35, shadow: false, height: 1.1 * chart.chartHeight, width: 800 },
                series: chartSeries
        });
    } 
    return false;
}

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

如何在 HighStock v6 下使用导航器系列 = 导出时可见系列保持相同的结果？这是一个直播jsFiddle，包含数据和所有选项。

Answer 1

此时，您不需要在 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()
          })

        }

      }

    }
  }

现场示例： https://jsfiddle.net/yf4stjmw/

API 参考：

https://api.highcharts.com/highstock/series.line.showInNavigator https://api.highcharts.com/highstock/series.line.visible

[编辑]

由于这行代码，您的所有图表系列都隐藏在导出的文件中：

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

不要忘记，load 事件处理程序在导出时也会触发，这就是您需要删除这些代码行的原因。然后它应该可以按您的意愿工作。