使用render.text.css拍攝HighChart的快照

我有一個簡單的highChart，禁用了x軸標籤。後來我用下面的代碼使用render.text.css拍攝HighChart的快照

function populateDateOnChart(chartID,minRange,maxRange) { 
    var chart = graphChart;  
    if(chart) { 
     var panelPlyGraph = Ext.getCmp(chartID); 
     chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', minRange), 1, panelPlyGraph.getHeight()-2) 
     .css({ 
      color : '#666666' , 
      align : 'right', 
      fontSize  : '18pt', 
      fontWeight : 'normal' 
     }).add(); 

     chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', maxRange), panelPlyGraph.getWidth()-148, panelPlyGraph.getHeight()-2) 
     .css({ 
      color : 'red',//'#666666' , 
      align : 'right', 
      fontSize : '18pt', 
      fontWeight : 'normal' 
     }).add(); 

    } 
}

我也嘗試添加它chart.events.load添加在圖表的文字，如下圖所示，但仍然沒能得到它的快照。

load: function() { 
graphOffsets = {}; 
graphOffsets.left = graphChart.axes[0].left; 
graphOffsets.length = graphChart.axes[0].len; 
graphOffsets.min = graphChart.axes[0].min; 
graphOffsets.max = graphChart.axes[0].max; 
graphOffsets.invalidMax = inValidMaxdate; 
populateDateOnChart('AccumulateGraph', graphOffsets.min, graphOffsets.max);

}

我能在我的HTML頁面完全達到x軸的標籤。問題是，我需要保存圖形的圖像。爲此，我使用了canvg。圖像出現，但是這個使用chart.renderer.text.css設置的xAxis文本沒有出現在圖像中。

x軸標籤屬性是好的，但它不會讓我的第一個標籤之前的第一個標籤之後添加填充。

任何人都可以請建議我一個替代canvg將於chart.render.text.css也同時保存圖像，或者在highChart標籤位置，如圖代碼的方式。

我們沒有對HighChart一個div，我們把它在ExtJS的面板。這可能是標籤沒有出現在快照中的原因嗎？

在此先感謝！

來源

2015-09-25 Stu

highcharts已經有了選擇，圖表導出爲外部按鈕導出，檢查此http png圖片，PDF等 –

：// jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-exportchart/ –

我試過了，xAxis標籤沒有進入生成圖片。 – Stu

我想我知道問題在哪裏 - 你得到的是錯誤的容器，正如你所建議的那樣。要改變兩兩件事：

populateDateOnChart('AccumulateGraph', graphOffsets.min, graphOffsets.max); - 而不是'AccumulateGraph'使用this：populateDateOnChart(this, graphOffsets.min, graphOffsets.max); - 現在你會通過圖表對象，而不僅僅是ID

更新你的方法上。因此：

function populateDateOnChart(chart,minRange,maxRange) { 
      chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', minRange), 1, chart.plotTop + chart.plotHeight - 20) 
      .css({ 
       color : '#666666' , 
       align : 'right', 
       fontSize  : '18pt', 
       fontWeight : 'normal' 
      }).add(); 

      chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', maxRange), chart.plotLeft + chart.plotWidth -148, chart.plotTop + chart.plotHeight - 20) 
      .css({ 
       color : 'red',//'#666666' , 
       align : 'right', 
       fontSize : '18pt', 
       fontWeight : 'normal' 
      }).add(); 
    }

我只是好奇 - 爲什麼你不能使用軸標籤？例如，你可以使用xAxis.tickPositioner只能先返回和這樣的最後的值：

xAxis: { 
    tickPositioner: functin(min, max) { 
    return [min, max]; 
    }, 
    labels: { 
    formatter: function() { 
     return Highcharts.dateFormat('%Y-%m-%d', this.key); 
    } 
    } 
}

來源

2015-09-29 10:03:19

謝謝你的回答！有用！ – Stu

我無法使用xAxis獨立定位標籤，這就是爲什麼我通過圖表渲染器將它作爲單獨文本添加的原因。 – Stu

使用render.text.css拍攝HighChart的快照

回答

相關問題