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标志单独执行此操作。正确执行此操作的最佳最快方法是定义简单的逻辑实现，并在事件update上使用legendItemClick适当的序列。然后，您的导出应该可以正常工作。请看下面的代码和示例：

  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

[EDIT]

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

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

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

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

1 个答案: