highcharts介绍
基础案例
var options = {
chart: {
type: 'bar', // 形状
},
title: '我的第一个图标', // 标题
subtitle: {
text: '我是副标题'
}
xAxis: {
categories: ['苹果', '香蕉', '橙子']
},
yAxis: {
title: {
text: '吃水果'
}
},
series: [{
name: '小明',
data: [1, 0, 4]
},
{
name: '小红',
data: [3, 3, 9]
},
]
}
// 调用初始化函数
var chart = Highcharts.chart('container', options)
// 通过jquery的方式实现, 特别注意导入的时候jquery应该在highcharts的前面
$('#container').highcharts(options)
// 可以设置 max-width 来控制
效果:
组成部分:
- 标题: title
- 坐标轴: axis
- 数据列 series
- 数据提示框: tootip
- 图例:legend
series
- 格式:
- data: [1,46,4,66,4]
- data: [[5,2], [4, 3], [6, 3]]; 如果是字符串就表示他的名字, 如果是当前数字下标
例子
例子1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://www.unpkg.com/jquery@3.5.1/dist/jquery.js"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/8.2.0/highcharts.js"></script>
<!-- <script src="./highcharts.js"></script> -->
</head>
<body>
<div id="container" style="width: 500px; height: 400px;"></div>
<script>
var options = {
chart: {
type: 'bar', // 形状
},
title: '我的第一个图标', // 标题
xAxis: {
title: {
text: '水果分类'
},
categories: ['苹果', '香蕉', '橙子']
},
yAxis: {
labels: {
// 不显示刻度
// enabled: false,
// 自定义label名称
formatter: function(val) {
// this.value 表示当前坐标上的值
return this.value + '个'
},
// 定义步长
step: 1
},
title: {
text: '吃水果' // 设置为null的时候隐藏
}
},
// 去除水印
credits: {
enabled: false0
},
series: [{
name: '小明',
// 表示取得名字
data: [
['红橙子', 4],
['西瓜', 10], 4
]
},
{
name: '小红',
// 表示下标
data: [
[0, 3],
[2, 3]
]
},
]
}
// 调用初始化函数
// var chart = Highcharts.chart('container', options)
$('#container').highcharts(options)
</script>
</body>
</html>
案例2：
浏览器占比
var options = {
chart: {
type: 'pie', // 形状
},
title: '浏览器占比', // 标题
series: [{
name: '浏览器占比',
// 表示取得名字
data: [
['谷歌', 40],
['西瓜', 10],
['火狐', 40]
]
}, ]
}
// 调用初始化函数
// var chart = Highcharts.chart('container', options)
$('#container').highcharts(options)
案例3:
综合案例
- 创建表
create table employee(
id int proimary key auto_increment,
name varchar(20) not null,
gender char(1) default '男',
salary double
)
-- 插入数据
insert into employee(name, gender, salary) values
('孙悟空', '男', 800),('孙悟空1', '男', 8000)
-- 查询数据
select * from employee
highcharts跟新数据的方法
chart.series[0].update({
data: [345, 456, 45, 67, 5, 7, 57, 657]
})
关于更新可能会报错
[Vue warn]: Error in callback for watcher "pieChart": "Error: Highcharts error #14 原因: 赋值的时候是字符串, 解决:转为数字
