本文详细介绍了Highcharts库的四种主要图表类型：饼图用于展示部分与整体的关系；曲线图适合展示数据的趋势变化；柱状图则通过条形长度对比不同类别的数据；折线图用于表现数据在时间轴上的变化。通过对这四种图表的理解和应用，可以更好地进行数据可视化。
1，饼图
<span style="font-size:18px;"><!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style>
g.highcharts-grid:nth-child(6) > path {
stroke-width: 0;
}
.highcharts-background{
fill:transparent !important;
}
</style>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function () {
$('#container_1').highcharts({
chart: {
type: 'pie',
backgroundColor:"#EEF3FA",
x: -200,
},
credits: {
enabled: false //右下角不显示LOGO
},
title: {
text: '故障次数',
style: {
color: "#fff",
}
},
subtitle: {
text: '',
},
exporting: {//Highcharts 图表导出功能模块。
enabled: false
},
colors: ['#006FFF', '#2385FF', '#3F93FF', '#66AAFE',
'#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
legend: { //图例说明是包含图表中数列标志和名称的容器
align: 'center',
x: 20,
y: 20,
symbolHeight: 14,//高度
symbolWidth: 20,
itemStyle: {
cursor: 'pointer', color: '#fff'
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
symbolWidth: 24,
point: {
events: {
legendItemClick: function (e) {
return false; // 直接 return false 即可禁用图例点击事件
}
}
}
}
},
series: [{
data: [
['温度', 10.0],
['湿度', 21.9],
['浸水',28.1],
['烟感', 28.1]
]
}]
});
});
</script>
<script src="js/highcharts.js"></script>
<script src="js/info_alert.js"></script>
</head>
<body>
<div id="container_1" style="width:100%;height:100%; margin: 0 auto;"></div>
</body>
</html>
<img src="https://img-blog.youkuaiyun.com/20161025105122259" alt="" /> </span>2，曲线图：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style>
g.highcharts-grid:nth-child(6) > path {
stroke-width: 0;
}
.highcharts-legend {
margin-top: -30px;
}
.highcharts-background{
fill:transparent;
}
</style>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline',
},
title: {
text: '',
},
subtitle: {
text: '',
},
exporting: {//Highcharts 图表导出功能模块。
enabled: false
},
//禁用点击图例隐藏
plotOptions: {
series: {
events: {
legendItemClick: function (e) {
return false; // 直接 return false 即可禁用图例点击事件
}
}
}
},
legend: { //图例说明是包含图表中数列标志和名称的容器
align: 'center',
verticalAlign: 'top',
x: 10,
y: 20,
symbolHeight: 14,//高度
symbolWidth: 20,
itemDistance:15,
point: {
events: {
legendItemClick: function (e) {
return false; // 直接 return false 即可禁用图例点击事件
}
}
},
itemStyle: {
cursor: 'pointer', color: '#fff'
}
},
xAxis: {
categories: [
'00:00',
'06:00',
'12:00',
'16:00',
'24:00',
],
lineColor: '#fff',
lineWidth: '1',
tickColor: 'transparent',
tickWidth: 1,
type:'linear',
tickmarkPlacement: 'on',
labels: {
style: {
color: '#fff'
}
},
},
yAxis: {
title: {
text: 'Fruit units'
},
lineColor: '#fff',
lineWidth: '1',
gridLineColor: '#fff',
gridLineDashStyle: 'dash',
labels: {
style: {
color: '#fff'
}
},
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
},
series: {
events: {
legendItemClick: function (e) {
return false; // 直接 return false 即可禁用图例点击事件
}
}
}
},
series: [{
name: '温度',
data: [3, 4, 3, 5, 4, 10, 12],
color: '#fbff00',
}, {
name: '湿度',
data: [1, 3, 4, 5, 8, 9, 4],
color: '#00ae06',
}, {
name: '浸水',
data: [2, 3, 6, 5, 2, 1, 3],
color: '#2eb8f2',
}, {
name: '烟感',
data: [1, 3, 2, 3, 3, 5, 4],
color: '#9501fe',
}
]
});
});
</script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
</head>
<body style="position:relative;">
<div id="container" style="width:90%; height:100%; margin: 0 auto">
</div>
</body>
</html>
3，柱状图：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<link rel="stylesheet" type="text/css" href="css/column_diagram.css" />
<link rel="stylesheet" type="text/css" href="css/info_report.css" />
<style>
g.highcharts-grid:nth-child(6) > path {
stroke-width: 0;
}
.highcharts-legend {
margin-top: -30px;
}
</style>
<script src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column', //指定图表的类型，默认是折线图（line）
},
credits: {
enabled: false //右下角不显示LOGO
},
title: {
text: '',
},
subtitle: {
text: '',
},
exporting: {//Highcharts 图表导出功能模块。
enabled: false
},
plotOptions: {
column: {
stacking: 'percent',
pointWidth:35
},
series:{
allowPointSelect:false,
animation:false,
events:{
legendItemClick:function(event){
return false; //return true 则表示允许切换
}
}
}
},
xAxis: {
title: {
text: '保存时间',
align: 'high',
rotation: 0,
},
categories: ['LT04', 'LT05', 'LT06'],
labels: {
align: 'center',
},
lineColor: '#000000',
lineWidth: '2',
tickColor: '#000000',
tickWidth: 1,
type: 'linear',
tickmarkPlacement: 'on',
},
yAxis: {
title: {
align: 'high',
offset: 0,
text: '数量',
rotation: 0,
y: -25
},
labels:{step:1},
plotLines: [{//通过颜色线横贯在绘图区域上标记轴中的一个特定值
value: 0,
width: 1,
color: '#808080'
}],
lineColor: 'black',
lineWidth: '2',
},
legend: { //图例说明是包含图表中数列标志和名称的容器
align: 'center',
verticalAlign: 'top',
x: 20,
y: 10,
symbolHeight: 14,//高度
symbolWidth:14
},
//禁用点击图例隐藏
series: [{
name: '高危',
data: [5, 3, 4],
color: '#E2214E',
}, {
name: '危险',
data: [2, 7, 3],
color: '#F7B52B'
}, {
name: '只读',
data: [3, 4, 4],
color: '#0749C3'
},{
name: '健康',
data: [3, 4, 4],
color: '#66FE17'
}
]});
});
</script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
</head>
<body style="position:relative;">
<div id="container" style="width:90%; height:230px; margin: 0 auto">
</div>
</body>
</html>
4，折线图：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<link rel="stylesheet" type="text/css" href="css/info_report.css" />
<link rel="stylesheet" type="text/css" href="css/broken_line.css" />
<style>
g.highcharts-grid:nth-child(6) > path{
stroke-width:0;
}
#container{
width:100%;
}
.highcharts-background{
width:100%;
}
.highcharts-series-group{
margin-top:-100px;
}
g.highcharts-axis{
margin-top:-10%;
}
g.highcharts-axis:nth-child(7) > path:nth-child(1){
margin-top:-10%;
}
</style>
<script src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'line', //指定图表的类型，默认是折线图（line）
},
credits: {
enabled: false //右下角不显示LOGO
},
title: {
text: '',
},
subtitle: {
text: '',
},
exporting: {//Highcharts 图表导出功能模块。
enabled: false
},
xAxis: {
title: {
text: '保存时间',
align: 'high',
rotation: 0,
x:10,
y:0,
},
categories: ['1年', '2年', '3年', '4年', '5年', '6年','7年'],
labels: {
align: 'center',
},
lineColor: '#000000',
lineWidth: '2',
tickColor: '#000000',
tickWidth: 1,
type: 'linear',
tickmarkPlacement: 'on',
},
yAxis: {
title: {
align: 'high',
offset: 0,
text: '数量',
rotation: 0,
y: -25,
},
plotLines: [{//通过颜色线横贯在绘图区域上标记轴中的一个特定值
value: 0,
width: 1,
color: '#808080'
}],
lineColor: 'black',
lineWidth: '2',
max:100
},
legend: { //图例说明是包含图表中数列标志和名称的容器
align: 'center',
verticalAlign: 'top',
x: 30,
y: 10,//修改距离上面的高度
},
//禁用点击图例隐藏
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
return false; // 直接 return false 即可禁用图例点击事件
}
}
}
} ,
series: [{
name: '高危',
color: '#E1204E',
data: [20.0, 20.0, 41.2, 30.4, 50.2, 14.0, 10.0],
}, {
name: '危险',
color: '#F8B52A',
data: [15.6, 30.9, 10.5, 20.5, 37.0, 38.0, 45.0]
}, {
name: '只读',
color: '#0749C3',
data: [50.1, 10.6, 43.5, 38.4, 13.5, 37.0, 50.0]
}, {
name: '健康',
color: '#7CFF06',
data: [33.9, 24.2, 15.7, 23.5, 20.9, 35.2, 47.0]
},
]});
});
</script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
</head>
<body>
<div id="container" style="width:90%; height:230px; margin: 0 auto">
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
