highcharts
老版调用方式demo
DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>demotitle>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
head>
<body>
<div id="tableContent">div>
<div id="timeTableContent">div>
div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript">script>
<script type="text/javascript" src="http://code.highcharts.com.cn/highcharts/4.1.5/highcharts.js">script>
<script type="text/javascript">
// Highcharts JS v4.1.5 (2015-04-13) Highcharts老版调用方式
$('#tableContent').highcharts({
chart: {
type: 'column'
},
title: {
text: '分类统计'
},
subtitle: {
text: '' //数据来源: WorldClimate.com
},
xAxis: {
categories: [
'异常','退款','特殊'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
headerFormat: '{point.key}',
pointFormat: '{series.name}: ' +
'{point.y:.1f} mm
',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
},
series: {
cursor: 'pointer',
events: {
click: function (event) { //点击事件
alert(
this.name + ' 被点击了\n' +
'最近点：' + event.point.category + '\n' +
'Alt 键: ' + event.altKey + '\n' +
'Ctrl 键: ' + event.ctrlKey + '\n' +
'Meta 键（win 键）： ' + event.metaKey + '\n' +
'Shift 键：' + event.shiftKey
);
}
}
}
},
series: [{
name: '东京',
data: [49.9, 71.5, 106.4] //19个数据，跟categories个数对应
}]
})
$('#timeTableContent').highcharts({
chart: {
type: 'bar'
},
title: {
text: '异常时间'
},
subtitle: {
text: '' //数据来源: Wikipedia.org
},
xAxis: {
categories: ['今天', '昨天', '前天','30天之前'], //备注，可搞成变量
title: {
text: null
}
},
yAxis: {
min: 0,
minRange: 1, //柱形图 当数据全为0时，怎么让数据居底部，而不是当中
title: {
text: '',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' 百万' //单位
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true // 允许数据标签重叠
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
series: [{
name: '2020年',
data: [0, 0, 6, 0, 0]
}]
})
script>
body>
html>
参考资料：highcharts cdn地址
文档地址： https://api.highcharts.com.cn/highcharts