javascript - 如何通过 AJAX 调用从 PHP MySQL 数据获取 Highstock 中的数据

Question

我正在尝试使用来自 MySQL 数据的 Highstock 绘制图表，这是我从 ajax 调用中获得的。如果我打印 console.log() 中的所有数据和日期，所有数据和日期都会正确显示。但在图中，我正确地获取了数据值，但所有日期值都是错误的。

这是我的index.php:

<form action="#" method="post" id="form-chart-2" class="form-inline">
<select class="form-control" id="typeOfIndicator" name="indicator_type">
    <option value="0">Type of Indicator</option>
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
    <option value="3">Type 3</option>
    <option value="4">Type 4</option>
</select>

<select class="form-control" id='indicatorName' name='indicator_name'>
    <option value="0">Indicator Name: </option>
    <option value="1">Indicator 1</option>
    <option value="2">Indicator 2</option>
    <option value="3">Indicator 3</option>
    <option value="4">Indicator 4</option>
</select>

<input type="text" class="form-control" id="advanceTickerName" name="advanceTickerName" value="">

<input type="date" class="form-control startDate" id="startdate" aria-required="true" name="startdate">

<input type="date" class="form-control endDate" id="enddate" name="enddate">

<select class="form-control" id="chartType" name="chartType" required>
    <option value="area">Area</option>
    <option value="column">Bar</option>
    <option value="line">Line</option>
</select>

<button type="submit" class="btn btn-chart-create form-control">Create</button>
</form>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="js/chart_js.js"></script>

chart_js.js:

$("#form-chart-2").on('submit',function(e) {
    e.preventDefault();

    var form = $(this);
    var url = 'ajax/advanced_chart.php';
    var chartType = $("#chartType").val();
    var tickerName = $("#advanceTickerName").val();

    $.ajax({
        type: "GET",
        url: url,
        data: form.serialize(), 
        dataType: "json",
        success: function(data)
        {
            XTickIntervalOne = data.XTickInterval;
            xAxisDataOne = data.dates;
            yAxisDataOne = data.dataValue;

            Highcharts.stockChart('container-chart',{
                chart: {
                    type: ''+chartType,
                    zoomType: 'xy',
                },
                title: {
                    text: ""+ tickerName,
                    margin: 50
                },
                xAxis: {
                    categories: xAxisDataOne,
                    tickInterval: XTickIntervalOne,
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    opposite: true,
                },
                legend: {
                    enabled: true
                },
                plotOptions: {
                    series: {
                        marker: {
                            enabled: false
                        },
                        fillOpacity: 0.1,
                        dataLabels: {
                            enabled: true,
                            allowOverlap: true,
                            formatter: function(){
                                var isLast = false;
                                if(this.point.x === this.series.data[this.series.data.length -1].x &&
                                    this.point.y === this.series.data[this.series.data.length -1].y){
                                    isLast = true;
                                }
                                return isLast ? this.y : '';
                            }
                        },
                        lineWidth: 2,
                        states: {
                            hover: {
                                lineWidth: 3
                            }
                        },
                        threshold: null
                    }
                },
                series: [{
                    name: ''+indexName,
                    data: yAxisDataOne,
                    color: '#146FB8',

                }],
                exporting: {
                    width: 1500
                },
            });
        }
    });
});

advanced_chart.php:

include ("connect.php");
$indicatorTypeId = 0; $indicatorNameId = 0;
$startDate = ""; $endDate = "";

if(isset($_GET['indicator_type'])){ 
  $indicatorTypeId = $_GET['indicator_type'];
  $indicatorNameId = $_GET['indicator_name'];
  $startDate = $_GET['startdate'];
  $endDate = $_GET['enddate'];
}

$query = "SELECT dateValue, data_value FROM data_archive WHERE indicator_id='".$indicatorNameId."' AND dateValue BETWEEN '".$startDate."' AND '".$endDate."' ORDER BY dateValue";
$sql = mysqli_query($conn, $query);

//select dateValue, data_value FROM data_archive where indicator_id=6 and dateValue BETWEEN "2002-02-28" AND "2012-02-28" ;

$XTickInterval = 1;
$totalRows = mysqli_num_rows($sql);
if($totalRows > 10) {
  $XTickInterval = ceil($totalRows / 10);
}

$dates = array();
$dataValue = array();

while($row = mysqli_fetch_assoc($sql)){
  $date = strtotime($row["dateValue"]);
  $dates[] = date("d-m-Y", $date);
  $dataValue[] = (double)$row["data_value "];
}

$json = json_encode(array("dates"=>$dates,"dataValue"=>$dataValue,"XTickInterval"=>$XTickInterval));
print $json;

以下是我的输出图表，其中所有日期都显示错误:

Image .

谁能告诉我如何在 Highstock 中正确显示日期和数据？

Answer 1

xAxis: {
   categories: xAxisDataOne,
   tickInterval: XTickIntervalOne,
}

此处您使用了默认的 xAxis 类型(类别)。对于您的数据，更好的方法是使用 datetime 轴类型。然后您需要提供带有日期和值的积分，如下所示:

xAxis: {
   type: 'datetime',
   tickInterval: XTickIntervalOne,
},
series: [{
   data: [
      [1543484700000, 23.3],
      [1543494300000, 18.1],
      ...
   ]
}]

请注意，日期数字是自 1970 年以来的时间戳(以毫秒为单位)。

API引用:
https://api.highcharts.com/highcharts/xAxis.type
https://api.highcharts.com/highcharts/series.area.data