代码之家 › 专栏 › 技术社区 › wergeld

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

highcharts javascript

wergeld · 技术社区 · 6 年前

我们正在从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的情况下,这很好。但是,现在它不显示任何导出的导航器系列,除了最初加载的系列-导航器窗口不显示任何点。

jsFiddle 数据和所有选项。

1 回复 | 直到 6 年前

daniel_s 6 年前

此时,您不需要在 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

[编辑]

所有图表系列都隐藏在导出的文件中,原因如下:

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

别忘了 load