php - 试图在 ApexCharts 上使用 Php 获得基于月份的总和

问题描述

我正在尝试使用ApexCharts显示基于日期月份的 DB 总和并显示到 ApexCharts 中，但是我尝试过的方法不起作用，我是新手，请参阅 mysql db image 和 apexcharts 链接以了解如何工作和我想要达到的目标。任何帮助表示赞赏。

我的 Myqsl 数据库：查看图片

获取图表PHP代码：

    $stats = array();

    $query = "SELECT SUM(totalprice), `timestamp` AS sum FROM `orders`";
    $statement = $db->query($query);

    while ($row = $db->fetch($statement))
    {

          $row_array  = $row['sum'];
          $row_array  = $row['timestamp'];
         array_push($stats,$row_array);

    }
echo json_encode($stats);

JS代码：

$.getJSON('../../shop/js/chart/getchart.php', function (json) {
    var options = {
        series: [{
            name: 'sales',
            data: json
        }],
        chart: {
            type: 'area',
            height: 350,
            stacked: false,
        },
        stroke: {
            show: true,
            curve: 'smooth',
            lineCap: 'butt',
            colors: undefined,
            width: 3,
            dashArray: 0,
        },
        markers: {
            size: 4,
            colors: ["#765be6"],
            strokeColors: "#fff",
            strokeWidth: 1,
            hover: {
                size: 7,
            }
        },
        fill: {
            type: 'gradient',
            gradient: {
                shade: 'dark',
                gradientToColors: ['#03adf7'],
                shadeIntensity: 5,
                inverseColors: true,
                type: 'vertical',
                opacityFrom: .7,
                opacityTo: .8,
            },
        },
        dataLabels: {
            enabled: false
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '25%',
                endingShape: 'rounded'
            },
        },
        responsive: [{
            breakpoint: 480,
            options: {
                legend: {
                    position: 'bottom',
                    offsetX: 0,
                    offsetY: 0
                }
            }
        }],
        xaxis: {
            categories: ['Ian', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        },
        colors: ['#765be6'],

    };
    var chart = new ApexCharts(document.querySelector("#sales"), options);
    chart.render();
});

标签： phpjquerymysqlchart.jsapexcharts

您正在尝试以混合方式option.series.data使用总计和时间戳进行初始化。把他们分开！

将时间戳放在option.xaxis.categories或中option.labels（检查这个）。在option.series.data您只需要存储总和！

更仔细地浏览您的 ApexChart示例。有同样的实现方式。

php - 试图在 ApexCharts 上使用 Php 获得基于月份的总和

问题描述

解决方案

推荐阅读