使用 highcharts统计图表

<div id="summary_gw_duration" style="height: 300px"></div>

 <script src="http://10.10.10.10:8000/static/assets/js/highcharts.js"></script>

<script type="text/javascript">
$(function() {
$('#summary_gw_duration').highcharts({
chart: {
defaultSeriesType: 'line',
zoomType: 'x'
},
title: {
text: '统计',
x: -20 //center

},
credits:{
text:'www.cvtt.cn'
},
subtitle: {
text: 'Source: 平台',
x: -20

},
xAxis: {
type:"datetime",
maxPadding : 0.05,
minPadding : 0.05,

dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%e. %b %H:%M',
hour: '%b/%e %H:%M',
day: '%e日/%b',
week: '%e. %b',
month: '%b %y',
year: '%Y'

}
},
yAxis: {
min: 0,
title: {
text: '时长 (呼叫)'

},
plotLines: [{
value: 0,
width: 1,
color: 'red'

}]

},
tooltip: {
valueSuffix: '分钟'

},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0

},
series: [{% for key in summary_gw_duration.gw_duration %}
{
name: '{{ key.0 }}',
data: {{ key.1 }},
visible: false
},
{% endfor %}
]
});
})

 

</script>