线性表，条形图，饼状图等图形工具是我们的日常上网和工作中比较常见的图形工具，它们主要是用来代替数据列表等传统的数据处理方式，相比于其它的数据对比显示形式，更能够让我们直观明了的了解到事物的发展动态等等。
在网站的开发或者其他的软件开发中，如果想对网站上的数据（比如访问量统计等）有更清晰明了的认识，可以借助于这些个工具来实现。
那么如何将网站上的数据以绘制这些图形的方式显示出来呢？我刚开始想的是利用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中调用即可，并设置其他的内容。
如下是最后的条形图效果。
