Попытка получить общую сумму по месяцам на ApexCharts с Php - PullRequest
Новая
       22

Попытка получить общую сумму по месяцам на ApexCharts с Php

0 голосов
/ 14 апреля 2020

Я пытаюсь отобразить с помощью ApexCharts общую сумму из БД на основе даты месяца и отобразить в ApexCharts, но то, что я пробовал, не работает, я новичок в этом, см. mysql дБ изображение и ссылку на apexcharts, чтобы увидеть, как работает и чего я хочу достичь. Любая помощь приветствуется.

Моя Myqsl DB: См. Изображение

getchart 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();
});

1 Ответ

0 голосов
/ 14 апреля 2020

Вы пытаетесь инициализировать option.series.data с итогами и с метками времени смешанным способом. Просто разделите их!

Поместите метки времени в option.xaxis.categories или в option.labels ( отметьте это ). В option.series.data необходимо хранить всего всего!

Go через ваш ApexChart пример более тщательно. Есть такой же способ реализации.

...