【phantomjs】使用phantomjs產生highChart的圖片（待完善）

標籤：

閱讀目錄

• 簡單介紹
• 章節1：xxxx
• 章節2：xxx
• 章節3：xxxxx
• 章節4：xxx
• 章節5：xxx
• 章節6：xxx
• 章節7：xxx

簡單介紹




回到頂部一、使用phantomjs結合json檔案直接產生highcharts圖片《highcharts官網-樣本程式》
http://www.highcharts.com/demo http://www.highcharts.com/demo/line-basic  （基本類型的chart）http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types  （幾種chart的組合）
將範例程式碼中的內容儲存為json格式的資料，比如將上面的儲存為basicLine.json

 

  
{
  
 title: {
  
 text: ‘Monthly Average Temperature‘,
  
 x: -20 //center
  
 },
  
 subtitle: {
  
 text: ‘Source: WorldClimate.com‘,
  
 x: -20
  
 },
  
 xAxis: {
  
 categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘,
  
 ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
  
 },
  
 yAxis: {
  
 title: {
  
 text: ‘Temperature (°C)‘
  
 },
  
 plotLines: [{
  
 value: 0,
  
 width: 1,
  
 color: ‘#808080‘
  
 }]
  
 },
  
 tooltip: {
  
 valueSuffix: ‘°C‘
  
 },
  
 legend: {
  
 layout: ‘vertical‘,
  
 align: ‘right‘,
  
 verticalAlign: ‘middle‘,
  
 borderWidth: 0
  
 },
  
 series: [{
  
 name: ‘Tokyo‘,
  
 data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  
 }, {
  
 name: ‘New York‘,
  
 data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
  
 }, {
  
 name: ‘Berlin‘,
  
 data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
  
 }, {
  
 name: ‘London‘,
  
 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  
 }]
  
}
 

《使用phantomjs產生highcharts》http://www.highcharts.com/docs/export-module/render-charts-serverside 























回到頂部二、利用java+phantomjs產生highcharts圖片具體思路：

1. 使用highchart-java-api的jar，配置待產生的highcharts的屬性和Data；
2. 將上一步產生的資料轉換為json格式，供phantomjs使用；
3. 使用phantomjs和json檔案，產生圖片；

highchart-java-api可以使用：

 

  
<dependency>
  
 <groupId>nl.pvanassen</groupId>
  
 <artifactId>highchart-java-api</artifactId>
  
 <version>0.1.1</version>
  
</dependency>
 

回到頂部三、




回到頂部四、



回到頂部五、



回到頂部六、



回到頂部七、














來自為知筆記(Wiz)

【phantomjs】使用phantomjs產生highChart的圖片（待完善）