一、目录介绍
- chart.html:用来展示图表
- paintchart.js:绘制图表
- getjsondata.php:用来获取json格式的数据
二、数据库
三、代码展示
chart.html
<div id="departchart" style="min-width:400px;height:400px"></div>
paintchart.js
$.ajax({ type: "get", //请求方式 url: "getjsondata.php", //请求地址 dataType: "Json", //传输的参数,json格式的数据 success: function(data) { //服务器返回的数据 $.each(data, function(key, val) { chartdata.push(val); })//将数据转为[[],[],[]]格式 $('#departchart').highcharts({//调用highchart chart: { type: 'column' }, title: { text: '各学院教职工总数' }, subtitle: { text: '数据截止 2017-11' }, xAxis: { type: 'category', labels: { rotation: -45, style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }, yAxis: { min: 0, title: { text: '人数 (位)' } }, legend: { enabled: false }, tooltip: { pointFormat: '总人数: <b>{point.y:.1f} 位</b>' }, series: [{ name: '总人数', data: chartdata, dataLabels: { enabled: true, rotation: -90, color: '#FFFFFF', align: 'right', format: '{point.y:.1f}', // one decimal y: 10, // 10 pixels down from the top style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }] }); //endchart } //endsuccess }); //endajax
getjsondata.php
<?php header("Content-type: text/json"); $servername = "localhost"; $username = ""; $password = ""; $dbname = ""; // 创建连接 $con = mysqli_connect($servername, $username, $password, $dbname); // 检测连接 $sql = " select distinct department ,count(department) from workinfo group by department "; $result = mysqli_query($con, $sql); if (!$result) { printf("Error: %s\n", mysqli_error($con)); exit(); } while ($rows = mysqli_fetch_array($result, MYSQL_ASSOC)) { $arr[] = array( $rows['department'], intval($rows['count(department)']), ); } $data = json_encode($arr, JSON_UNESCAPED_UNICODE); echo $data; mysqli_close($con);
四、效果展示