highcharts(数据可视化框架),ajax传递数据问题
1.引入 Highcharts
注意用什么功能就按照官方引用对应的js
<%--highcharts视图js--%> <script src="/js/Highcharts/code/highcharts.js"></script> <script src="/js/Highcharts/code/highcharts-3d.js"></script> <script src="/js/Highcharts/code/modules/exporting.js"></script> <script src="/js/Highcharts/code/modules/oldie.js"></script> <script src="/js/Highcharts/code/modules/cylinder.js"></script> <%-- 支持中文--%> <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
2.创建一个简单的图表
<%--highcharts视图js表图--%> <div id="container1" style="width:44%;float: left"></div> <%--highcharts视图js圆圈图--%> <div id="container2" style="min-width:30%;height:400px;float: right"></div>
<script>
/*highcharts视图js表格图*/ var chart1 = Highcharts.chart('container1', { chart: { type: 'cylinder', options3d: { enabled: true, alpha: 10, beta: 10, depth: 100, viewDistance: 50 } }, title: { text: '部门人数' }, plotOptions: { series: { depth: 25, colorByPoint: true } }, series: [{ //seriesData是json数据 data:seriesData, name: '部门人数', showInLegend: false }], xAxis:[{ title: { enabled: true, text:"部门", style:"color:#000;" }, categories:categories, }], yAxis:[{ title: { enabled: true, text:"人数", style:"color:#000;" } }] }) /*highcharts视图js圆圈图*/ var chart2 = Highcharts.chart('container2', { chart: { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 }, width:400, height:400, }, title: { text: '部门人员占比' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35, dataLabels: { enabled: true, format: '{point.name}' } } }, series: [{ type: 'pie', name: '部门人员占比', //seriesData是json数据 data: seriesData }] });
</script>
3.用ajax来设置seriesData,categories的值(这就是翻车的地方,因为ajax的异步加载问题)
<script> //highcharts视图的数据 var seriesData = []; //highcharts视图的部门数据 var categories = []; //获取到highcharts视图的数据 function chartData() { $.ajax({ url:'/employee/idxnd', type:'get', //必须设置成同步,不然categories赋不上值 async: false, success:function(data){ seriesData=data; //设置部门categories数据 for(var i = 0;i<data.length;i++){ categories.push(data[i][0]); } }, error:function(error){ console.log(error) } }) } chartData(); </script>
4./employee/idxnd返回的数据格式
[ [ "IT部", 53 ], [ "采购部", 33 ], [ "销售部", 37 ], [ "人事部", 4 ], [ "售后部", 1 ], [ "运货部", 3 ] ]
效果展示