Highcharts - 导出图表的当前状态

根据用户的交互，Highcharts的导出方法使用图表的初始状态而不是最新状态。如果您显示/隐藏一些系列，然后导出图表，您仍然可以获得所有系列，而不是图表实际显示的内容。Highcharts - 导出图表的当前状态

var chart; 
$(document).ready(function() { 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chart', 
      defaultSeriesType: 'line', 
     }, 

     title: { 
      text: 'Expression Profile', 
     }, 

     subtitle: { 
      text: 'Reference: act' 
     }, 

     xAxis: { 
      categories: ['14das-seedling','25das-aerial','35das-aerial', 
         '42das-rosette','42das-stem','53das-stem', 
         '53das-inflores'], 
      title: { 
       text: 'Development stages', 
       margin:20 
      } 

     }, 

     yAxis: { 
      title: {            
       text: 'Log10 act' 
      }, 

      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 

     legend: { 
      margin:20 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>mir'+ this.series.name +'</b><br/>'+ 
           this.x +' <br/>log10:'+ this.y ; 
      } 
     }, 

     series: [ 
      { 
       name: '156a', 
       data: [-2.75607, -3.41066, -4.10053, -4.63856, 
         -4.73462,-4.6145,-3.90987] 
      }, 
      { 
       name: '156b', 
       data: [-4.15935, -6.54969, -6.70229, -5.80646, 
         -5.68092,-5.38481,-5.96406] 
      }, 
      { 
       name: '156c', 
       data: [-4.83317, -5.52142, -4.94995, -5.47179, 
         -4.97123,-4.86163,-5.12806] 
      }, 
      { 
       name: '156d', 
       data: [0, -5.93499, -5.41856, -5.88918, 
         -6.70304,-5.69335,-5.39792] 
      }, 
      { 
       name: '156e', 
       data: [-4.0707, -6.1185, -6.58353, -6.17734, 
         -6.84433,-5.4114,-5.37817] 
      }, 
      { 
       name: '156f', 
       data: [-3.97561, -5.02619, -5.67834, -5.65722, 
         -5.76238,-4.51125,-5.30344] 
      }, 
      { 
       name: '156g', 
       data: [-3.81589, -2.50758, -2.41623, -3.63983, 
         -3.73004,-2.90055,-3.61997] 
      }, 
      { 
       name: '156h', 
       data: [-4.31169, -5.74017, -5.55419, -5.26679, 
         -5.01009,-4.99596,-5.68062] 
      } 
     ] 
    }); 
});

这里是我的小提琴：http://jsfiddle.net/sherlock85/safKs/

是否有可能导出图表的当前状态？

任何帮助，将不胜感激。

来源

2011-05-25 s_sherly

对我来说，即使在修改图表时，也会导出最新的状态。我猜如果你修改后做一个chart.redraw（），它会导出最新的状态。同时尝试升级到最新版本的highcharts。

来源

2011-05-26 08:35:34

我用最新的highcharts版本，但仍然出口只在初始状态。在演示图库官方高级网站上的情况是一样的：http：//www.highcharts.com/demo/。我应该在哪里添加chart.redraw（）函数？ – 2011-05-26 10:40:27

我没有在您的示例中看到任何用户交互，您能更具体吗？如果添加一些与点相关的事件，例如在事件的回调中，您可以添加chart.redraw（） – 2011-05-26 13:09:42

谢谢你帮助我，Elzo。在我的例子中：http://jsfiddle.net/sherlock85/safKs/你可以看到8个系列，它们都是可见的。假设我想隐藏一些系列，所以我点击了图例中的几个人。和这种状态的图表（带有一些隐藏的系列）我想导出为图片。但令人遗憾的是，因此我收到了我的图表在初始状态（所有系列都可见）的图片。 – 2011-05-26 13:54:14

此问题已在Highcharts 2.1.5版中修复。我相信下面看到的changelog的评论可以解决您的问题。

导出的图表现在尊重用户设置缩放和可见性选项后的最小和最大值。

来源

2011-08-31 15:53:41 Jared

，如果你有你的图表中使用下面的代码的问题仍然存在：

chart = new Highcharts.Chart({ 
     chart: { 
      ..., 
      events: { 
       load: function(event) { 
        this.series.forEach(function(d,i){if(d.options.id==1)d.hide()}) 
       } 
      }  
     },...

这段代码是负责你的图在这个例子中最初隐藏系列（ID为== 1 ）。它似乎具有不能导出图形当前状态的负面影响。

删除它，并解决了最初的问题。

如果你仍想保留数据系列的“初始隐藏”，并使用AJAX（和jQuery），例如获取数据，请使用以下类型的代码，而不是：

$.ajax({ 
    type: "GET", 
    url: myURL, 
    data: {data: myData}, 
    dataType: 'json', 
    success: function(data) { 
     chart.series[0].setData(data[0], true); 
     chart.series[1].setData(data[1], true); 
    }, 
    complete: function(jqXHR, textStatus) { 
     chart.series[1].hide(); 
    } 
});

来源

2013-10-04 14:09:30 Andries

Highcharts - 导出图表的当前状态

回答

相关问题