abstract：作者：張遠(yuǎn)靖鏈接：https://www.zhihu.com/question/39857001/answer/84193997來(lái)源：知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。1、后端代碼后端只需要根據(jù)前端傳過(guò)來(lái)的參數(shù)獲取對(duì)應(yīng)的數(shù)據(jù)并按照規(guī)定的數(shù)據(jù)格式返回即可，下面是簡(jiǎn)單的 php 代碼，請(qǐng)參考作者：張遠(yuǎn)靖鏈接：https://www.zhihu.com/question/39857001/a
作者：張遠(yuǎn)靖
鏈接：https://www.zhihu.com/question/39857001/answer/84193997
來(lái)源：知乎
著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。
1、后端代碼
后端只需要根據(jù)前端傳過(guò)來(lái)的參數(shù)獲取對(duì)應(yīng)的數(shù)據(jù)并按照規(guī)定的數(shù)據(jù)格式返回即可，下面是簡(jiǎn)單的 php 代碼，請(qǐng)參考
作者：張遠(yuǎn)靖
鏈接：https://www.zhihu.com/question/39857001/answer/84193997
來(lái)源：知乎
著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。
<?php
// 統(tǒng)計(jì)數(shù)據(jù)類型，有 年、周、日
$type = $_REQUEST['type'];
$data = array();
$data['categories'] = array();
$data['data'] = array();
// 針對(duì)不同的統(tǒng)計(jì)類型做處理
switch($type) {
case 'day' :
//
;break;
case 'week':
//
;break;
case 'year':
// 這里的代碼僅供參考，保證最終返回的結(jié)果是
// {"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);
?>后端返回的數(shù)據(jù)格式是：
即
{
"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>更多關(guān)于highcharts圖表重用請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）其他文章！