highcharts PHP中使用

官网

https://www.hcharts.cn/demo/highcharts

html

<div id="container" style="min-width:400px;height:400px"></div>

js

Highcharts.chart('container', { ???chart: { ???????plotBackgroundColor: null, ???????plotBorderWidth: null, ???????plotShadow: false, ???????type: 'pie' ???}, ???title: { ???????text: '2018年1月浏览器市场份额' ???}, ???tooltip: { ???????pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' ???}, ???plotOptions: { ???????pie: { ???????????allowPointSelect: true, ???????????cursor: 'pointer', ???????????dataLabels: { ???????????????enabled: true, ???????????????format: '<b>{point.name}</b>: {point.percentage:.1f} %', ???????????????style: { ???????????????????color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' ???????????????} ???????????} ???????} ???}, ???series: [{ ???????name: 'Brands', ???????colorByPoint: true, ???????data: [{ ???????????name: 'Chrome', ???????????y: 61.41, ???????????sliced: true, ???????????selected: true ???????}, { ???????????name: 'Internet Explorer', ???????????y: 11.84 ???????}, { ???????????name: 'Firefox', ???????????y: 10.85 ???????}, { ???????????name: 'Edge', ???????????y: 4.67 ???????}, { ???????????name: 'Safari', ???????????y: 4.18 ???????}, { ???????????name: 'Sogou Explorer', ???????????y: 1.64 ???????}, { ???????????name: 'Opera', ???????????y: 1.6 ???????}, { ???????????name: 'QQ', ???????????y: 1.2 ???????}, { ???????????name: 'Other', ???????????y: 2.61 ???????}] ???}]});

这里的数据通常都是从数据库查询处理出来的。
而它的格式是json的格式。
所以通过ajax获取比较方便一些。

public function get_series_data() { ???????if ($date = $_POST['date']) { ???????????$sql = 'select count(*) as count ,appid from tf_bag_lucky_log where is_receive=1 and add_time > '.strtotime($date." 00:00").' and add_time < '.strtotime($date ." 23:59").' group by appid order by count desc'; ???????} else { ???????????$sql = 'select count(*) as count ,appid from tf_bag_lucky_log where is_receive=1 group by appid order by count desc'; ???????} ???????// 统计 ???????$data_list = Db::query($sql); ???????$series_data = []; ???????foreach ($data_list as $k=>&$v) { ???????????$xcx_info = Db::name('xcx')->where('appid',$v['appid'])->find(); ???????????if ($k == 0) { ???????????????$series_data[$k] = [ ???????????????????'name' => $xcx_info['name'], ???????????????????'y' => $v['count'], ???????????????????'sliced' => true, ???????????????????'selected' => true, ???????????????]; ???????????} else { ???????????????$series_data[$k] = [ ???????????????????'name' => $xcx_info['name'], ???????????????????'y' => $v['count'], ???????????????]; ???????????} ???????} ???????$this->json->setErr(0, '操作成功'); ???????$this->json->setAttr('data', $series_data); ???????$this->json->Send();}

js改造

showContainer(date);function showContainer(date) { ???????????$.ajax({ ???????????????url: "get_series_data", ???????????????data: { ???????????????????"date" ?????????: date, ???????????????}, ???????????????type: "POST", ???????????????dataType: "json", ???????????????success: function (data) { ???????????????????Highcharts.chart('container', { ???????????????????????chart: { ???????????????????????????plotBackgroundColor: null, ???????????????????????????plotBorderWidth: null, ???????????????????????????plotShadow: false, ???????????????????????????type: 'pie' ???????????????????????}, ???????????????????????title: { ???????????????????????????text: '金猪中奖来自小程序' ???????????????????????}, ???????????????????????tooltip: { ???????????????????????????pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' ???????????????????????}, ???????????????????????plotOptions: { ???????????????????????????pie: { ???????????????????????????????allowPointSelect: true, ???????????????????????????????cursor: 'pointer', ???????????????????????????????dataLabels: { ???????????????????????????????????enabled: false ???????????????????????????????}, ???????????????????????????????showInLegend: true ???????????????????????????} ???????????????????????}, ???????????????????????series: [{ ???????????????????????????name: '占比', ???????????????????????????colorByPoint: true, ???????????????????????????data: data.data, ???????????????????????????// data: [{ ???????????????????????????// ????name: 'Chrome', ???????????????????????????// ????y: 1000, ???????????????????????????// ????sliced: true, ???????????????????????????// ????selected: true ???????????????????????????// }, { ???????????????????????????// ????name: 'Internet Explorer', ???????????????????????????// ????y: 11.84 ???????????????????????????// }, { ???????????????????????????// ????name: 'Firefox', ???????????????????????????// ????y: 10.85 ???????????????????????????// }, { ???????????????????????????// ????name: 'Edge', ???????????????????????????// ????y: 4.67 ???????????????????????????// }, { ???????????????????????????// ????name: 'Safari', ???????????????????????????// ????y: 4.18 ???????????????????????????// }, { ???????????????????????????// ????name: 'Other', ???????????????????????????// ????y: 7.05 ???????????????????????????// }] ???????????????????????}], ???????????????????}); ???????????????}, ???????????????error: function () { ???????????????????alert("网络错误"); ???????????????}});

highcharts 非常灵活，非常方便。ajax，json获取数据，效果刚刚的。

highcharts PHP中使用

原文地址：https://www.cnblogs.com/jiqing9006/p/10337648.html