php highcharts,highcharts PHP中使用

官网

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

html

js

Highcharts.chart('container', {

chart: {

plotBackgroundColor: null,

plotBorderWidth: null,

plotShadow: false,

type: 'pie'

},

title: {

text: '2018年1月浏览器市场份额'

},

tooltip: {

pointFormat: '{series.name}: {point.percentage:.1f}%'

},

plotOptions: {

pie: {

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

format: '{point.name}: {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}: {point.percentage:.1f}%'

},

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获取数据，效果刚刚的。