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:

 

评分:0

我来说两句

Open Toolbar