HightChart简单教程

HightCharts是一个基于纯javascript的数据图形化组件，当然如果用于企业用途需要购买授权，个人使用则免费，个人觉得HightCharts是目前我用过的效果比较炫的图形化种类较多的一种组件。我就将我个人 使用的情况做一个简单的教程。
首先从HighCharts官网https://www.hcharts.cn/ 下载最新的版本

应用环境
Hightcharts 5.0.14 + jQuery 1.8.3以上 + spring-boot

基于静态数据的图

首先我们生成基于静态数据的图
在页面引入相应的js文件

<script src="assets/js/libs/jQuery-1.8.3.min.js"></script>
<script src="assets/js/libs/highcharts/highcharts.js"></script>
<script src="assets/js/libs/highcharts/exporting.js"></script>
<script src="assets/js/libs/highcharts/highcharts-zh_CN.js"></script>

注意要先引入jquery的包再引入hightcharts的包不然可能会出错
随后在html页面添加以下内容

<div id="container" style="min-width:400px;height:400px"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '月平均降雨量'//图标题
},
subtitle: {
text: '数据来源: WorldClimate.com'//图的子标题
},
xAxis: {
categories: [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
],//x轴的坐标
crosshair: true//当鼠标选中某个柱的时候是否有遮罩
},
yAxis: {//定义y轴
min: 0,//y轴最小值为0
title: {
text: '降雨量 (mm)'//y轴名称
}
},
tooltip: {//定义一个弹出框当鼠标指向某个坐标柱时弹出，弹出框为一个表格
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',//point.key指的x坐标轴的值
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +//其中某一个y轴项的名称与后面的y轴值对应
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',//默认显示的值为y轴的值:.1f表示为保留一位小数点的浮点数
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
exporting: {//默认不带有导出功能
enabled: false
},
credits: {//默认不显示highcharts的标志
enabled: false
},
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]
}]
});
});
</script>

这样就能生成一个基础的柱状图，这是一个柱状图，下面我们来看一个饼状图

<div id="container" style="min-width:400px;height:400px"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '2014 某网站各浏览器浏览量占比'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: '浏览器访问量占比',
data: [
['Firefox',
45.0],
['IE',
26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari',
8.5],
['Opera',
6.2],
['其他',
0.7]
]
}]
});
});
</script>

这是一个饼状图具体的参数配置类似，更多详细的简单实例可以参考下载的官方包中的demo

基于Ajax的图形化

利用ajax动态获取数据并生成相应的图也不是一件特别困难的事情，需要注意的就是按照不同的图类型组装特定的数据。

饼图的数据结构
[
['1月', 25.0],
['2月', 26.8],
{
name: '3月',
y: 22.8,
sliced: true,
selected: true
},
['4月', 24.6]
]
//因此我们需要按照这个格式生成数据
//我们先定义一个function
//院系学生百分比
function getYxxsChartData() {
//图形数据
var chartData = new Array();
$.ajax({
type: "POST",
url: "scuvc/jw/xs/chart/yxxs",
async: false,
success: function (result) {//返回数据根据结果进行相应的处理
if (result) {
var total = 0;
$(result).each(function (i, val) {
total += val[1];
});
//var data1 = {label:
result[0][0] , data: result[0][1], color: colours.red};
chartData.push([result[0][0], (result[0][1] / total).toFixed(4) * 100]);
chartData.push([result[1][0], (result[1][1] / total).toFixed(4) * 100]);
chartData.push([result[2][0], (result[2][1] / total).toFixed(4) * 100]);
chartData.push([result[3][0], (result[3][1] / total).toFixed(4) * 100]);
chartData.push([result[4][0], (result[4][1] / total).toFixed(4) * 100]);
chartData.push([result[5][0], (result[5][1] / total).toFixed(4) * 100]);
}
}
});
return chartData;
}
//然后在生成图片的时候加载数据就调用定义好的这个function
series: [{
type: 'pie',
name: '百分比',
data: getYxxsChartData()
}]

//柱状图的数据结构
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]
}]
//因为数据结构的方式不同我们又需要采用其他的数据构造方式
//同样的我们需要定义一个function，按照特定的数据结构生成所需要的数据
function getXwxlChartData(i) {
//图形数据
var chartData = new Array();
$.ajax({
type: "POST",
url: "scuvc/zl/jzg/chart/xwxl",
async: false,
success: function (result) {//返回数据根据结果进行相应的处理
if (i == 0) {
var total = 0;
$(result).each(function (i, val) {
total += val[1];
});
$(result).each(function (i, val) {
chartData.push([val[0], (val[1] / total).toFixed(4) * 100]);
});
} else {
$(result).each(function (i, val) {
chartData.push({name: val[0], y: val[1], drilldown: val[0]})
});
}
}
});
return chartData;
}
//最后在生成图的时候进行调用
series: getXwxlChartData(1)

由于我目前只用到了这两类图，所以先简单介绍这么多，后面如果有新图形化的使用我会继续完善上来

最后

以上就是义气心情为你收集整理的HightChart简单教程HightChart简单教程的全部内容，希望文章能够帮你解决HightChart简单教程HightChart简单教程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。