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 - 導出圖表的當前狀態

回答

相關問題