線性表，條形圖，餅狀圖等圖形工具是我們的日常上網和工作中比較常見的圖形工具，它們主要是用來代替數據列表等傳統的數據處理方式，相比於其它的數據對比顯示形式，更能夠讓我們直觀明瞭的瞭解到事物的發展動態等等。
在網站的開發或者其他的軟件開發中，如果想對網站上的數據（比如訪問量統計等）有更清晰明瞭的認識，可以藉助於這些個工具來實現。
那麼如何將網站上的數據以繪製這些圖形的方式顯示出來呢？我剛開始想的是利用H5的Canvas來實現，但是我對Canvas不是很熟，沒有達到利用它來製作想要的圖表的能力，於是便想到利用互聯網上的一些開源的工具。據我的搜索瞭解到，highcharts和百度的echart是目前主流的提供圖表接口的網站。於是我便選擇了使用Highcharts，如下是它的官網。
首先需要在官網上下載相應的js和demo，我下載的是目前最新版本的6.2.0
接着就可以利用它來結合自己網站上的數據開發想要的各種圖形了。以下我僅以條形圖爲例，寫一個jsp代碼
<body>
<!-- Polar inverted -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--plain Polar inverted -->
<script src="manage/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<!-- Polar -->
<script src="manage/lib/hcharts/Highcharts/5.0.6/js/highcharts-more.js"></script>
<%
String sql="select distinct left(l_Time,10) as y_m_d from loginlog";
ArrayList<TimeNum> tns=UtilDao.getDay(sql);
ArrayList<String> days=new ArrayList<String>();
ArrayList<Integer> nums=new ArrayList<Integer>();
for(TimeNum tn:tns){
days.add("'"+tn.getTime()+"'");
nums.add(tn.getNum());
//System.out.println(tn.getNum());
}
System.out.println(days);
%>
<div id="container"></div>
<button id="plain">Plain</button>
<button id="inverted">Inverted</button>
<button id="polar">Polar</button>
<script type="text/javascript">
var chart = Highcharts.chart('container', {
title: {
text: '2018年553影院日訪問量統計 '
},
subtitle: {
text: '數據來源：www.zy52113.com'
},
xAxis: {
categories: <%=days%>
},
yAxis: {
title: {
text: '日訪問量 (ip)'
}
},
series: [{
name:'訪問IP數量',
type: 'column',
colorByPoint: true,
data: <%=nums%>,
showInLegend: false
}]
});
$('#plain').click(function () {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
//text: 'Plain'
}
});
});
$('#inverted').click(function () {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
//text: 'Inverted'
}
});
});
$('#polar').click(function () {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
//text: 'Polar'
}
});
});
</script>
</body>
首先調用導入到項目中的需要用到得到的highcharts的js，然後寫Java代碼獲取你自己的數據，因爲在highcharts中會用到的是如下箭頭指向的數據，所以也要將你得到的數據轉化成以下格式，在這裏我使用了三個ArrayList數組鏈表。UtilDao.getDay(sql);方法返回庫中所有存在訪問記錄的日期以及對應的日期下的訪問數量，日期和訪問數量寫了一個Javabean，第一個ArrayList指向的泛型類型便是這個bean。然後利用增強for循環遍歷這個ArrayList，將遍歷出的日期和數量以highcharts所需要的類型（x軸爲['2018-10-16', '2018-10-17']，y軸爲[5, 28]）各存入日期鏈表和數量鏈表。
接下來在highcharts所使用的js中調用即可，並設置其他的內容。
如下是最後的條形圖效果。
