Highstock 图表上的日期和时间错误

Question

我查看了我的图表问题，我认为问题在于 Highstock 代码。 我有 2 个其他图表运行相同的 php 代码，我只是从 highchart 更改为 highstock。 我正在尝试在我的图表中添加一个范围选择器。 该代码在显示缩放和选择器按钮方面有效，但日期现在显示不正确。 我正在从在线 MySQL 数据库中提取数据，因此我很难为您运行演示。时间戳格式在我提到的其他图表中有效。

第一个代码正确显示日期

<?php
// 1-test.php

$servername = "localhost";

$dbname = "";
$username = "";
$password = "";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, value1, reading_time FROM Sensor order by reading_time desc limit 40";

$result = $conn->query($sql);

while ($data = $result->fetch_assoc()){
    $sensor_data[] = $data;
}

$readings_time = array_column($sensor_data, 'reading_time');

$i = 0;
foreach ($readings_time as $reading){
    $readings_time[$i] = date("d-M H:i", strtotime("$reading + 16 hours"));
  $i += 1;
}

$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);

/*echo $value1;
echo $reading_time;*/

$result->free();
$conn->close();
?>

<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="refresh" content="30">
  <link rel="icon" type="image/png" href="favicon.png">
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <style>
    body {
      min-width: 310px;
        max-width: 1500px;
        height: 500px;
      margin: 0 auto;
    }
    h2 {
      font-family: Arial;
      font-size: 2.5rem;
      text-align: center;
    }
    
  </style>
  <body>
    <h2>Test page 2</h2>
    <div id="chart-temperature" class="container"></div>
    
</div>

<script>

var value1 = <?php echo $value1; ?>;
var reading_time = <?php echo $reading_time; ?>;

var chartT = new Highcharts.Chart({
  chart: { renderTo : 'chart-temperature',
  type: 'spline'   
  },
  title: { text: 'Roof Temperature' },
  series: [{
  showInLegend: false,
  data: value1
  }],
  plotOptions: {
  spline: { animation: false,
  dataLabels: { enabled: true }
  },
  series: { color: '#059e8a' }
  },
  xAxis: { 
  type: 'datetime',
  categories: reading_time
  },
  yAxis: {
  title: { text: 'Temp (C)' }
    },
  credits: { enabled: false }
});

</script>
</body>
</html>

然后此代码将日期显示为星期四，1 月 1 日 00:00:00:001

<?php

$servername = "localhost";

$dbname = "";
$username = "";
$password = "";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, value1, reading_time FROM Sensor order by reading_time desc limit 40";

$result = $conn->query($sql);

while ($data = $result->fetch_assoc()){
    $sensor_data[] = $data;
}

$readings_time = array_column($sensor_data, 'reading_time');

$i = 0;
foreach ($readings_time as $reading){
  $readings_time[$i] = date("d-M H:i", strtotime("$reading + 16 hours"));
  $i += 1;
}

$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);

/*echo $value1;
echo $reading_time;*/

$result->free();
$conn->close();
?>

<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="refresh" content="30">
  <link rel="icon" type="image/png" href="favicon.png">
  <script src="https://code.highcharts.com/stock/highstock.js"></script>
  <script src="https://code.highcharts.com/stock/modules/data.js"></script>
  <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
  

  <style>
    body {
      min-width: 310px;
        max-width: 1500px;
        height: 500px;
      margin: 0 auto;
    }
    h2 {
      font-family: Arial;
      font-size: 2.5rem;
      text-align: center;
    }
    
  </style>
  <body>
    <h2>Test Page</h2>
    <div id="chart-temperature" class="container"></div>
    
<script>


var value1 = <?php echo $value1; ?>;
var reading_time = <?php echo $reading_time; ?>;

var chartH = new Highcharts.stockChart({
  chart: { renderTo : 'chart-temperature',
  type: 'spline'   
  },
  title: { text: 'Roof Temperature' },
  series: [{
  showInLegend: false,
  data: value1
  }],
  plotOptions: {
   spline: { animation: false,
  dataLabels: { enabled: true }
  },
  series: { color: '#059e8a' }
  },
          rangeSelector: {

            buttons: [{
                type: 'day',
                count: 3,
                text: '3d'
            }, {
                type: 'week',
                count: 1,
                text: '1w'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'month',
                count: 6,
                text: '6m'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
            selected: 3
        },
  xAxis: { 
  type: 'datetime',
  dateTimeLabelFormats: { second: '%H:%M:%S' },
  categories: reading_time
  },
  yAxis: {
  title: { text: 'Temp (C)' }
    },
  credits: { enabled: false }
});

        
</script>
</body>
</html>

第一个屏幕截图正在运行。 第二个是错误的日期， 关于如何更改日期的任何想法

Answer 1

图表之间的差异源于第二个图表是股票图表，它不支持 x 轴上的类别。 您需要使用[x, y]格式的数据。

var value1 = [18.10, 14.5];
var reading_time = ['2021-08-22 15:00:53', '2021-08-23 15:00:53'];

var seriesData = value1.map(function(val, index) {
    return [new Date(reading_time[index]).getTime(), val];
});

现场演示： http://jsfiddle.net/BlackLabel/xLh7y8d6/

API 参考： https://api.highcharts.com/highcharts/xAxis.type

Highstock 图表上的日期和时间错误

问题描述

1 个解决方案

解决方案1
0 2021-08-23 14:59:35

Highstock 图表上的日期和时间错误

问题描述

1 个解决方案

解决方案1 0 2021-08-23 14:59:35

解决方案1
0 2021-08-23 14:59:35