做了好幾個項目都用到了Highcharts，好用自然不用多說，這里總結一下每次作圖經常用的一些配置，方便以后查看。
引入Highcharts非常簡單，只需引入對應的js，頁面中寫入存放表格的div，js中對表格加以配置。
配置說明
下面是Highcharts官方的基礎柱狀圖的實例配置，我將加入常用的配置並加以說明。想直接體驗的朋友可以訪問這個地址進行表格調試。https://jshare.com.cn/demos/hhhhD8
var chart = Highcharts.chart('container',{
// 設置表格的圖例非顯示，圖例就是說明每個不同顏色柱子代表什么含義，一般項目中會自己定義所以加以隱藏
legend : {
enabled : false
},
// 表格的標題，設置為null為不顯示
title : {
text : null
},
// 設置版權信息不顯示，就是Highcharts.com.cn行
credits : {
enabled : false
},
// 設置表格右上角的下載和導出按鈕不顯示
navigation: {
buttonOptions: {
enabled: false
}
},
chart: {
type: 'column',
// 設置表格距離div的內邊距，默認是[10,10,15,10]
spacing : [ 0, 0, 0, 0 ],
},
xAxis: {
categories: [
'一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
],
crosshair: true,
// 不顯示x軸文字
labels : {
enabled : false
},
},
yAxis: {
min: 0,
title: {
text: '降雨量 (mm)'
},
lables : {
// 對y軸上顯示的文字進行格式化定義，下面的方法是數字超過三位時，用逗號進行間隔，並在最后添加mm
formatter:function(){
return Highcharts.numberFormat(this.value,0,"",",")+"mm";
}
}
},
tooltip: {
// head + 每個 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: '東京',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: '紐約',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: '倫敦',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: '柏林',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
以上只是一些基礎的配置，更詳細的說明可以進入官網進行查看https://api.highcharts.com.cn/highcharts
導出SVG
有這樣一個需求，頁面有打印pdf的功能，生成pdf的時候需要將表格顯示在pdf文件中。大致思路是這樣的，點擊打印按鈕的時候，將表格轉成svg的代碼，發給后台，后台再將svg轉為png格式的圖片，從而插入到pdf文件中進行顯示。
怎么獲得Highcharts的svg代碼呢？當然官方也提供了方法，只需導入exporting.js，使用以下方法：
var svg = chart.getSVG();
通過以上方法獲取到SVG文件后，發給后台進行使用batik的jar包進行轉換（Java端使用Batik將SVG轉為PNG），生成png。
這里還有一個問題，就是如果在表格顯示后，通過js對表格進行了調整，導出的SVG代碼依然是js修改前的代碼，也就是說不能導出最終修改后的圖表。
這時候就需要動一些歪腦筋了，通過F12可以看到表格的在頁面其實就是SVG的代碼
那是不是把svg標簽中的代碼獲取到就可以生成想要的圖片呢，答案是否定的。因為頁面中的svg標簽和通過方法獲取到的svg還是有區別的，頁面中的svg標簽中不含有命名空間，具體可參考這篇文章svg命名空間。
<svg xmlns="http://www.w3.org/2000/svg">
<!-- more tags here -->
</svg>
如以上代碼中的xmlns，就是這個svg的命名空間，xmlns並不是一個簡單的屬性，所以不能通過Jquery的attr()方法給強行添加。
我們可以使用另外一種直接的方式
var svg = $("#container .highcharts-container").html().replace(/<svg /, '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ');
這樣獲取到的svg字符就可以再后台生成想要的圖片了。