highcharts的用法
//需要导入的js包
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/modules/exporting.js"></script>
//显示图形的层
<div id="container" style="min-width: 300px; height:250px; max-width:200px; margin: 0 auto;float:left"></div>
//这个是把数据先装在这个层里面隐藏起来不让其显示，方便js调用
<div style="display: none;" id="dt1">${data1}</div>
//主要的js
$(function () {
var t=$.parseJSON($("#dt1").text());
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
lang:{
printChart:"打印图表",
downloadJPEG: "下载JPEG 图片",
downloadPDF: "下载PDF文档" ,
downloadPNG: "下载PNG 图片" ,
downloadSVG: "下载SVG 矢量图" ,
exportButtonTitle: "导出图片"
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text:'民情上报情况'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}条{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: "比例",
colorByPoint: true,
data: t
}]
});
});
});
正确的数据格式：
{"data1":[{"id":"661","name":"巴山镇","y":129},{"id":"662","name":"巨亭镇","y":0},{"id":"663","name":"胡家坝镇","y":0},{"id":"665","name":"安乐河镇","y":0},{"id":"666","name":"铁锁关镇","y":0},{"id":"667","name":"毛坝河镇","y":0},{"id":"668","name":"阳平关镇","y":0},{"id":"669","name":"胡家贝镇","y":0},{"id":"670","name":"大安镇","y":0},{"id":"671","name":"太阳岭镇","y":0},{"id":"672","name":"燕子砭镇","y":0},{"id":"673","name":"高塘镇","y":0},{"id":"674","name":"二郎坝镇","y":0},{"id":"675","name":"广坪镇","y":0},{"id":"676","name":"舒家坝镇","y":0},{"id":"677","name":"青木川镇","y":0},{"id":"678","name":"代家坝镇","y":0},{"id":"680","name":"禅家岩镇","y":0}],"code":"success"}
data1格式在次说明y的值要封装成int，避免发生错误
更多就请参照下载的highchars源代码，里面内容丰富各种统计图