当前位置：首页 > news >正文

highcharts 使用实例

news 来源：原创 2024/5/2 22:33:41

后端使用django实现，返回的数据可以修改为从数据库获取或其他方式获取，实例里是写死的数据。

urls配置：

url(r'^outip/chart/$', views.charts),
url(r'^outip/getchart/$', views.get_chart),
url(r'^outip/getlast/$', views.get_last),
url(r'^outip/detail/$', views.get_detail_chart),

View Code

所有实例浏览器访问的后端方法：charts

@csrf_exempt
def charts(request):
    return render_to_response('html/chart.html')

View Code

所有实例使用的html代码：chart.html

<html>
<head>
<meta charset="utf-8">
<style> </style>
<script type="text/javascript" src="/outip/staticfiles/js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="/outip/staticfiles/highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="/outip/staticfiles/highcharts/js/modules/exporting.js"></script>
<script type="text/javascript" src="/outip/staticfiles/js/activechart.js"></script>
<!-- <script type="text/javascript" src="/outip/staticfiles/js/chart.js"></script> -->
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script> </script>
</body>
</html>

View Code

1.实时刷新曲线图（若取消实时刷新，将activechart.js中 chart的events删除即可）：

js代码: activechart.js

$(document).ready(function () {
        Highcharts.setOptions({
            decimalPoint: '.',    // 小数点号，例如 12.50
            thousandsSep: ',',     // 千分号，例如 12,000
            global: {
                useUTC: false
            }
        });

function getchart() {
       var datax = [];
       var datay = [];
       $.ajax({
       type: "POST",
       dataType: "json",
       url:'/outip/getchart/',
       success: function(result) {
           if (result.errno == 0) {
               for(var i=0;i<result.data.length;i++) {
                   datax.push(result.data[i].x)
                   datay.push(result.data[i].y)
               };
               start(datax,datay);
               //console.log(datax);
               //console.log(t);
            }else {
                alert('err');
            }
       }
    });
}
function start(datax,datay) {
    $('#container').highcharts({
        chart: {
            type: 'spline',
            animation: Highcharts.svg,
            marginRight: 10,
            events: {
                load: function () {
                    var series = this.series[0];
                    setInterval(function () {
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url:'/outip/getlast/',
                            success: function(result) {
                            if (result.errno == 0) {
                                series.addPoint([result.data.x, result.data.y], true, true);
                            } else {
                                alert('last err');
                            }
                            }
                        });
                    }, 60000);
                }
            }
        },
        title: {
            text: 'Total flow',
            x: -20 //center
        },
        //subtitle: {
        //    text: 'Source:',
        //    x: -20
        //},
        xAxis: {
            categories: datax
            //categories: ["2016-10-08 17:11"]
        },
        yAxis: {
            title: {
                text: 'flow/Bytes'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        credits:{
            enabled:false // 禁用版权信息
        },
        tooltip: {
            valueSuffix: ' Bytes',
            formatter:function(){
               //console.log(this);
               return this.key+'<br>'+Highcharts.numberFormat(this.y,'2','.',',')+' Bytes';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'center',
            verticalAlign: 'bottom',
            borderWidth: 0
        },
        series: [{
            name: 'Flow',
            data: datay
        }]
    });
}
getchart();
});

View Code

后端方法:

1) 获取初始数据：get_chart

@csrf_exempt
def get_chart(request):
    data = [{'x':'2016-10-08 17:11','y':1},{'x':'2016-10-08 17:12','y':3},{'x':'2016-10-08 17:13','y':4},{'x':'2016-10-08 17:14','y':400},{'x':'2016-10-08 17:15','y':124},{'x':'2016-10-08 17:16','y':2444},{'x':'2016-10-08 17:17','y':23334},{'x':'2016-10-08 17:18','y':40}]
    return HttpResponse(json.dumps({'errno':0,'data':data}))

View Code

2）获取最新的一个数据：get_last

@csrf_exempt
def get_last(request):
    data = {'x':'2016-10-08 17:19','y':100}
    return HttpResponse(json.dumps({'errno':0,'data':data}))

View Code

2.基础柱状图

js代码：activechart.js（datay每个元素中要有name和data两个key,且名字不能改，data的值为一个数组；若将plotOptions.column.stacking属性加上，则成为堆叠柱状图）

function getchart() {
       var datax;
       var datay;
       $.ajax({
       type: "POST",
       dataType: "json",
       url:'/outip/detail/',
       success: function(result) {
           if (result.errno == 0) {
               datax = result.data.time
               datay = result.data.value
               start(datax,datay);
               //console.log(datay);
               //console.log(t);
            }else {
                alert('err');
            }
       }
    });
}
function start(datax,datay) {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Detail flow',
            x: -20 //center
        },
        credits:{
            enabled:false // 禁用版权信息
        },
        //subtitle: {
        //    text: 'Source:',
        //    x: -20
        //},
        xAxis: {
            categories: datax
            //categories: ["2016-10-08 17:11"]
        },
        yAxis: {
            title: {
                text: 'flow/Bytes'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
             formatter: function () {
                return this.x + ' Total: ' + Highcharts.numberFormat(this.point.stackTotal,'2','.',',') +
                    ' Bytes<br/><b>' + this.series.name + ': ' + Highcharts.numberFormat(this.y,'2','.',',') + ' Bytes</b>';
            },
            valueSuffix: ' Bytes'
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                //stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        /*legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },*/
        //series: [{'name':'1','data':[1]},{'name':'2','data':[3]}] /*[{
        series: datay /*[{
            name: 'Flow',
            data: datay
        }]*/
    });
}
getchart();

View Code

后端方法：get_detail_chart

@csrf_exempt
def get_detail_chart(request):
    data = {'time':['2016-10-08 17:19'],'value':[{'name':'x0','data':[70]},{'name':'x1','data':[60]},{'name':'x2','data':[21]},{'name':'x3','data':[31]},{'name':'x4','data':[50]},{'name':'x5','data':[40]},{'name':'x6','data':[22]},{'name':'x7','data':[1]},{'name':'x8','data':[20]},{'name':'x9','data':[10]},{'name':'x10','data':[30]}]}
    return HttpResponse(json.dumps({'errno':0,'data':data}))

View Code

3.堆叠柱状图

js代码：activechart.js

function getchart() {
       var datax;
       var datay;
       $.ajax({
       type: "POST",
       dataType: "json",
       url:'/outip/getchart/',
       success: function(result) {
           if (result.errno == 0) {
               for(var i=0;i<result.data.length;i++) {
                   datax = result.data[i].time;
                   datay = result.data[i].value;
               };
               start(datax,datay);
               //console.log(datax);
               //console.log(t);
            }else {
                alert('err');
            }
       }
    });
}
function start(datax,datay) {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Total flow',
            x: -20 //center
        },
        //subtitle: {
        //    text: 'Source:',
        //    x: -20
        //},
        xAxis: {
            categories: datax
            //categories: ["2016-10-08 17:11"]
        },
        yAxis: {
            title: {
                text: 'flow/Bytes'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ' Bytes'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        //series: [{'name':'1','data':[1]},{'name':'2','data':[3]}] /*[{
        series: datay /*[{
            name: 'Flow',
            data: datay
        }]*/
    });
}
getchart();

View Code

后端方法：get_chart

@csrf_exempt
def get_chart(request):
    data = [{'time':['2016-10-08 17:11','2016-10-08 17:12'],'value':[{'name':'f1','data':[1,3]},{'name':'f2','data':[3,1]}]}]
    return HttpResponse(json.dumps({'errno':0,'data':data}))