highcharts PHP中使用

Posted 2021-02-06 认真生活、快乐工作 - 马云

官网

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