前端 -- HighCharts
1. 官方地址
https://www.hcharts.cn/
2. 引入方式
2.1 js文件下载
https://www.hcharts.cn/download
将highcharts.js放到静态目录中
2.2 CDN引入
<script src="http://code.hcharts.cn/highcharts/10.0.0/highcharts.js"></script>
3. 使用
3.1 API文档
https://api.hcharts.cn/highcharts/
3.2 全局配置
<script>
Highcharts.setOptions({
global:{
// HighCharts 默认使用UTC时间,此配置关闭UTC时间
useUTC: false,
},
}),
</script>
3.3 折线图示例
3.3.0 效果展示
3.3.1 字段说明
<script src="http://code.hcharts.cn/highcharts/10.0.0/highcharts.js"></script>
<div id="chart"></div> <!-- 定义折线图的显示区域 -->
<script>
var chartConfig = Highcharts.chart('chart', { // 绑定标签ID
title: {
text: null, // 不显示标题
},
subtitle: {
text: null, // 不显示二级标题
},
legend: {
// layout: 'vertical', 折线提示信息的位置设置
// align: 'right',
// verticalAlign: 'middle'
enabled: false, // 关闭折线的提示信息
},
credits: {
enabled: false, // 关闭版权信息
},
yAxis: { // y轴的显示
title: {
text: '就业人数'
}
},
yAxis: { // x轴的显示
type: "datetime", // 以时间格式展示
tickInterval: 60 * 60 * 24 * 1000, // 间隔时间,毫秒,这里是每天一个点
labels: {
formatter: function () {
return Highcharts.dateFormat("%m-%d", this.value); // 显示时间格式,%m-%d表示只显示月和日
},
rotation: -30 // 文本的偏移程度,-30为斜30度
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>', // 鼠标悬浮时的显示内容
pointFormat: '<span style="color:{series.color}">\u25CF</span> 数量:{point.y}',
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
// 多折线图渲染,列表中几个成员,前端就几条线,字典中的name为折线图在的legend中的显示标题,data为折线图中的点
series: [{
name: '安装，实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
// 单折线图渲染,二选一
series: [{
name: '安装，实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
});
</script>
3.3.2 Restful交互示例
2. 发送请求获取数据后,动态渲染折线图
<div id="chart"></div> <!-- 定义折线图的显示区域 -->
<script>
Highcharts.setOptions({
global:{
// HighCharts 默认使用UTC时间,此配置关闭UTC时间
useUTC: false,
}
}),
$(function () {
initChart()
})
function initChart() {
var chartConfig = { // 绑定标签ID
title: {
text: null, // 不显示标题
},
subtitle: {
text: null, // 不显示二级标题
},
legend: {
// layout: 'vertical', 折线提示信息的位置设置
// align: 'right',
// verticalAlign: 'middle'
enabled: false, // 关闭折线的提示信息
},
credits: {
enabled: false, // 关闭版权信息
},
yAxis: { // y轴的显示
title: {
text: '就业人数'
}
},
yAxis: { // x轴的显示
type: "datetime", // 以时间格式展示
tickInterval: 60 * 60 * 24 * 1000, // 间隔时间,毫秒,这里是每天一个点
labels: {
formatter: function () {
return Highcharts.dateFormat("%m-%d", this.value); // 显示时间格式,%m-%d表示只显示月和日
},
rotation: -30 // 文本的偏移程度,-30为斜30度
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>', // 鼠标悬浮时的显示内容
pointFormat: '<span style="color:{series.color}">\u25CF</span> 数量:{point.y}',
xDateFormat: '%Y-%m-%d',
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
// 单折线图渲染
series: [{
data:[]
}],
// 后端接口返回数据的格式如下
// [
// ["毫秒级时间戳", 1],
// ["毫秒级时间戳", 2],
// ]
$.ajax({
url: "",
type:"GET",
dataType:"JSON",
success: function (res) {
chartConfig.series[0].data = res.data // 根据后端返回的数据渲染折线图
var chart = Highcharts.chart('chart', chartConfig);
}
})
}
</script>
3.4 饼状图
3.4.0 效果展示
3.4.1 配置
<script>
$(function () {
initChart()
})
function initChart() {
var chartConfig = Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: null,
},
credits: {
enabled: false // 关闭版权信息
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
},
showInLegend: true
}
},
series: [{
name: '优先级',
colorByPoint: true,
data: [{
name: '高',
y: 61.41,
}, {
name: '中',
y: 11.84
}]
}]
});
$.ajax({
url: "",
type: "GET",
dataType: "JSON",
success: function (res) {
chartConfig.series[0].data = res.data // 根据后端返回的数据渲染饼状图
var chart = Highcharts.chart('chart', chartConfig);
}
})
}
</script>
3.5 柱状图
3.5.0 效果展示
3.5.1 配置
<script>
$(function () {
initChart()
})
function initChart() {
var chartConfig = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: null,
},
xAxis: {
categories: ['苹果', '橘子', '梨']
},
yAxis: {
min: 0,
title: {
text: '问题数量'
},
stackLabels: { // 堆叠数据标签
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
verticalAlign: 'top',
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'总量: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
}
}
},
series: [{
name: '小张',
data: [5, 3, 4]
}, {
name: '小彭',
data: [2, 2, 3]
}, {
name: '小潘',
data: [3, 4, 4]
}]
});
$.ajax({
url: "",
type: "GET",
dataType: "JSON",
success: function (res) {
chartConfig.xAxis.categories = res.data.user_list // 根据后端返回的数据替换xAxis
chartConfig.series = res.data.series_list // 根据后端返回的数据替换series
var chart = Highcharts.chart('chart', chartConfig);
}
})
}
</script>
python防脱发技巧
浙公网安备 33010602011771号