时间戳

首页 > 解决方案 > 使用来自 ajax 的 x 和 y 值输入 highchart

ajax - 使用来自 ajax 的 x 和 y 值输入 highchart

问题描述

我正在尝试使用 ajax 从数据库中提供我的 highchart。从我的 ajax 请求中，我想返回 x 和 y 值（x 值是这样的：年-周，即 2020-16；y 值是随机数）。我的图表仍然空​​白，我有一个我无法弄清楚的无声错误。我很确定它来自 ajax 返回的数据结构，但我似乎无法自己修复它。

这是我的javascript：


    var weekOptions = {
        chart: {
            renderTo: 'weekContainer',
            type: 'column',
        },
        title: {
            text: 'Last 52 weeks',
        },
        credits: {
            enabled: false,
        },
        xAxis: {
            lineWidth: .5,
            tickWidth: 1,
            tickLength: 10,
        },
        yAxis: {
            title: {
                text: 'Distance (miles)'
            },
            labels: {
                formatter: function() {
                    return this.value;
                },
            },
            allowDecimals: false,
            gridLineWidth: 1,
        },
        tooltip: {
            crosshairs: true,
            split: true,
            useHTML: true,
            valueDecimals: 2,
            valueSuffix: ' miles',
            formatter: '',
        },
        plotOptions: {
            spline: {
                marker: {
                    symbol: "circle",
                    radius: 3,
                }
            }
        },
        lang: {
            noData: "No Data. Make sure at least one activity type is selected."
        },
        noData: {
            style: {
                fontWeight: 'bold',
                fontSize: '15px',
                color: '#303030'
            }
        },
        exporting: {
            buttons: {
                contextButton: {
                    menuItems: ['viewFullscreen']
                }
            },
        },
        series: [{}],
    };


    //get series from ajax filtered by activity types
    $.ajax({
        url: "weekGetSeries.php",
        type: "POST",
        data: {
            activityType: activityTypeSelected,
            dataToDisplay: dataToDisplay,
        },
        dataType: "JSON",
        success: function (json) {
            weekOptions.series = json;
            var chart = new Highcharts.Chart(weekOptions);
        }
    });

这里是我的 ajax php 文件：


    <?php

        require 'dbConnection.php';

        $activityType = array(1,2,3,4,5);
        $dataToDisplay = "distance";
        $startingDate = date('Y-m-d', strtotime('-52 week', time()));
        $firstWeek = strtotime($startingDate);
        $conditionActivityType = ' WHERE startingTime >= "' . $startingDate . '" AND (type=' . implode(" OR type=",$activityType) . ')';
        $dataSerie = array("name" => "Weekly Stats","data" => array());

        for($i = 0; $i < 52; $i++){
            $nextWeek = strtotime('+'.$i.' week', $firstWeek);
            $dataSerie["data"][date("o",$nextWeek) . "-" . date("W",$nextWeek)] = 0;
        }

        $getActivities = $conn->query("SELECT * FROM activity" . $conditionActivityType . " ORDER BY startingTime ASC");
        if ($getActivities->num_rows > 0) {
            while($row = $getActivities->fetch_assoc()) {
                $date = substr($row["startingTime"],0,10);
                $date = strtotime($date);
                $week = date("W",$date);
                $category = date("Y-",$date).$week;
                $distance = ($row["distance"]);
                $movingTime = $row["movingTime"];
                $elapsedTime = $row["elapsedTime"];
                $totalElevationGain = ($row["totalElevationGain"])*3.28084;

                switch ($dataToDisplay) {

                    //distance
                    case "distance":
                        $dataSerie["data"][$category] += $distance;
                        break;

                    //Moving Time
                    case "movingTime":

                        break;

                    //Elapsed Time
                    case "elapsedTime":

                        break;

                    //elevation gain
                    case "totalElevationGain":

                        break;

                    //number activities
                    case "activities":

                        break;

                }
            }
        };

        $data = array();
        array_push($data,$dataSerie);

        echo json_encode($data);

    ?>

我的ajax返回这个：

[{"name":"每周统计数据","data":{"2019-17":13184.4,"2019-18":73560.2,"2019-19":36899.4,"2019-20":0,"2019 -21":38691.3,"2019-22":165127.8,"2019-23":188163.2,"2019-24":12888.5,"2019-25":60011.3,"2019-26":32585.2,"2019-27 ":12952.8,"2019-28":7944.8,"2019-29":79258.3,"2019-30":60885.2,"2019-31":0,"2019-32":0,"2019-33": 0,"2019-34":0,"2019-35":0,"2019-36":0,"2019-37":30974.6,"2019-38":7766.5,"2019-39":7685, "2019-40":21128.7,"2019-41":28996,"2019-42":46362.6,"2019-43":0,"2019-44":0,"2019-45":63694.8,"2019 -46":81551.1,"2019-47":104595.9,"2019-48":18121.7,"2019-49":18691.6,"2019-50":37538,"2019-51":40671.8,"2019-52":22109.6,"2020- 01":22079,"2020-02":22086.7,"2020-03":21933.2,"2020-04":30702.1,"2020-05":58259,"2020-06":38811.3,"2020-07" :43754,"2020-08":45109.1,"2020-09":50870.1,"2020-10":62917.8,"2020-11":0,"2020-12":95912.5,"2020-13":20836.2 ,"2020-14":25293,"2020-15":110540.5,"2020-16":150804.9}}]"2020-05":58259,"2020-06":38811.3,"2020-07":43754,"2020-08":45109.1,"2020-09":50870.1,"2020-10":62917.8,"2020 -11":0,"2020-12":95912.5,"2020-13":20836.2,"2020-14":25293,"2020-15":110540.5,"2020-16":150804.9}}]"2020-05":58259,"2020-06":38811.3,"2020-07":43754,"2020-08":45109.1,"2020-09":50870.1,"2020-10":62917.8,"2020 -11":0,"2020-12":95912.5,"2020-13":20836.2,"2020-14":25293,"2020-15":110540.5,"2020-16":150804.9}}]

如何构建数据以便提供图表？

标签： ajaxhighcharts

解决方案

在您的情况下series.data，需要是数组数组或对象数组。现在它是一个对象。

data: [
    [0, 6],
    [1, 2],
    [2, 6]
]

或者：

data: [{
    x: 1,
    y: 9
}, {
    x: 1,
    y: 6
}]

现场演示：http: //jsfiddle.net/BlackLabel/6m4e8x0y/4977/

API 参考： https ://api.highcharts.com/highcharts/series.column.data

推荐阅读