摘要：作者：张远靖链接：https://www.zhihu.com/question/39857001/answer/84193997来源：知乎著作权归作者所有，转载请联系作者获得授权。1、后端代码后端只需要根据前端传过来的参数获取对应的数据并按照规定的数据格式返回即可，下面是简单的 php 代码，请参考作者：张远靖链接：https://www.zhihu.com/question/39857001/a
作者：张远靖
链接：https://www.zhihu.com/question/39857001/answer/84193997
来源：知乎
著作权归作者所有，转载请联系作者获得授权。
1、后端代码
后端只需要根据前端传过来的参数获取对应的数据并按照规定的数据格式返回即可，下面是简单的 php 代码，请参考
作者：张远靖
链接：https://www.zhihu.com/question/39857001/answer/84193997
来源：知乎
著作权归作者所有，转载请联系作者获得授权。
<?php
// 统计数据类型，有 年、周、日
$type = $_REQUEST['type'];
$data = array();
$data['categories'] = array();
$data['data'] = array();
// 针对不同的统计类型做处理
switch($type) {
case 'day' :
//
;break;
case 'week':
//
;break;
case 'year':
// 这里的代码仅供参考，保证最终返回的结果是
// {"categories":["2014","2015","2016"],"data":[2323,4343,23433]} 就行
$data['categories'][0] = '2014';
$data['data'][0] = 2323;
$data['categories'][1]= '2015';
$data['data'][1] = 4343;
$data['categories'][2] ='2016';
$data['data'][2] = 23433;
; break;
default;break;
}
echo json_encode($data);
?>后端返回的数据格式是：
即
{
"categories": ["2014", "2015", "2016"], "data": [2323, 4343, 23433]
}
2、前端代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li { display: inline-block; cursor: pointer; background-color: #eee; padding: 4px 6px; } .active { color: red } </style> </head> <body> <ul> <li data-type="day">日</li> <li data-type="week">周</li> <li data-type="year">年</li> </ul> <div id="container"></div> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script type="text/javascript"> var chart = null; generateChart('day'); $('li').click(function() { if ($(this).hasClass('active')) return false; $('.active').removeClass('active'); generateChart($(this).data('type')); $(this).addClass('active'); }); function generateChart(type) { $.ajax({ url: 'php-data.php', data: { type: type }, success: function(data) { data = JSON.parse(data); if (chart) { // 更新操作 chart.xAxis[0].UPDATE({ categories: data.categories }); chart.series[0].UPDATE({ data: data.data }); } else { // 初始化图表操作 $('#container').highcharts({ xAxis: { categories: data.categories }, series: [{ name: 'x', data: data.data }] }, function(c) { chart = c; }) } } }) } </script> </body> </html>更多关于highcharts图表重用请关注PHP中文网（www.php.cn）其他文章！
