Highcharts运用
上一篇 /
下一篇 2020-09-18 10:09:44
/ 个人分类:Highcharts
最近在用django框架开发一套系统,需要用highcharts绘制图表,感觉很好用,分享一下
1.首先需要在前端页面JS中加载这个js包,<script. src="https://code.highcharts.com/highcharts.js"></script>
2.使用这个js包,绘制一张表。如下图
3.在前端页面采用jquery ajax的方法,异步请求数据。代码如下
function loadLineChar() {
$.ajax({
url: '/api/v1/lineChar',
type: 'POST',
dataType: 'json',
success: function (res) {
if (res.code == 200) {
var title = {
text: '测试结果趋势'
};
var xAxis = {
categories: res.data.days
};
var yAxis = {
title: {
text: '次数'
}
};
var plotOptions = {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
};
var series = res.data.data
var json = {};
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
$('#line-chart').highcharts(json);
}
}
});
收藏
举报
TAG: