记录一下个人Tp5框架Highcharts图表传值与图表数据赋值

曲线面积图：

1、首先引入Highcharts文件，因为我用的是layui框架所以会有一些冲突，特此将 highcharts.js献上：https://pan.baidu.com/s/1lLJ7k83W1GgnbI0Xt4Uqhw      提取码：jyoi　　或者扫描二维码

 

 

首先引入highcharts文件与我们写图表js的文件

 

 并且定义好两个id

 

 现在去执行这个方法获取数据并渲染

//转义
function HTMLDecode(input) {
    var converter = document.createElement("DIV");
    converter.innerHTML = input;
    var output = converter.innerText;
    converter = null;
    return output;
}


//数据概况历史总收入历史总支出、ROI图标
function _initOverviewHighcharts(start_date, end_date) {
    $.ajax({
        type: 'POST',
        url: "/game/overview/getChartsData",
        data:
            {
                start_date: start_date,
                end_date: end_date
            },
        dataType: 'json',
        success: function (data) {
            data = $.parseJSON(data)
            var chartsDate = JSON.parse(HTMLDecode(data.chartsDate));
            var chartsData = JSON.parse(HTMLDecode(data.chartsData));
            var chartsRoiData = JSON.parse(HTMLDecode(data.chartsRoiData));
            // 图表初始化函数
            option = {
                chart: {
                    type: 'areaspline'
                },
                exporting: {
                    allowHTML: true,
                    buttons: {
                        enabled: true
                    }
                },
                title: {
                    text: '历史总收入、支出走势'
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 100,
                    y: -10,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                },
                xAxis: {
                    categories: [],
                },
                yAxis: {
                    title: {
                        text: '单位： 元'
                    },
                    labels: {
                        formatter: function () {
                            return this.value / 10000 + '万';
                        }
                    }
                },
                tooltip: {
                    shared: true,
                    valueDecimals: 2,
                    valueSuffix: '元'
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    },
                    series: {
                        fillColor: {
                            linearGradient: [0, 0, 0, 300],
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.color(Highcharts.getOptions().colors[3]).setOpacity(0).get('rgba')]
                            ]
                        }
                    }
                },
                series: []
            };
            option1 = {
                chart: {
                    type: 'areaspline'
                },
                title: {
                    text: '累计ROI走势'
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 100,
                    y: -10,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                },
                xAxis: {
                    categories: [],
                },
                yAxis: {
                    title: {
                        text: '单位： 百分比'
                    },
                    labels: {
                        formatter: function () {
                            return this.value / 10 + '0';
                        }
                    }
                },
                tooltip: {
                    shared: true,
                    valueDecimals: 2,
                    valueSuffix: '%'
                },
                plotOptions: {
                    areaspline: {
                        fillOpacity: 0.5
                    }
                },
                series: []
            };
            $.each(chartsDate, function (key, item) {
                option.xAxis.categories.push(item);
                option1.xAxis.categories.push(item);
            });
            option.series = chartsData;
            option1.series = chartsRoiData;
            Highcharts.chart('container_1', option);
            Highcharts.chart('container_2', option1);
        }
    });
}

这边是两个图表。通过ajax请求数据，请求到之后进行转义，渲染。

附带后端代码：

可能有点low，我在后端直接把数据组装起来了。

public function getChartsData()
    {
        $start_date = input('start_date');
        $end_date = input('end_date');
        $gameid = $this->getUserDefaultGameID();
        $chartsDb = Db::connect('mysql')->table(TB_OVERVIEW);
        $charts = $chartsDb->field("date,IFNULL(round(income_sum/100,2),0.00) as 'income_sum',IFNULL(round(pay_sum/100,2),0.00) as 'pay_sum',IFNULL(round(income_sum/pay_sum*100,2),0.00) as 'roi'")->order("date asc")->where(['isdel' => 0, 'gameid' => $gameid])->whereBetween('date', [$start_date, $end_date])->select()->toArray();
        $chartsDate = array_column($charts, 'date');
        $chartsDatas = [
            [
                'name' => '历史总收入',
                'data' => json_decode('[' . join(',', array_column($charts, 'income_sum')) . ']', true)
            ],
            [
                'name' => '历史总支出',
                'data' => json_decode('[' . join(',', array_column($charts, 'pay_sum')) . ']', true)
            ]
        ];
        $chartsRoiDatas = [
            [
                'name' => '累计Roi',
                'data' => json_decode('[' . join(',', array_column($charts, 'roi')) . ']', true)
            ]
        ];
        $returnData = [
            'chartsDate' => json_encode($chartsDate),
            'chartsData' => json_encode($chartsDatas),
            'chartsRoiData' => json_encode($chartsRoiDatas),
        ];
        return json_encode($returnData);
    }

此博客给自己看的。实现效果就好