javascript - am4charts 不适用于时间变量，但它适用于 autoid 变量

Question

我在 am4charts 中显示了我的数据。最初我是用 id 字段创建 x 轴，但现在我想要时间字段。但当我使用时间字段时它不起作用，当我使用 id 字段时它工作正常。这是我用于显示图表的 java 脚本编码。

var chart2 = am4core.create("chartdiv1", am4charts.XYChart);
var data=[];
var open = 0;
var close = 0;

<?
$sql=mysqli_query($conn, "select  tyme as date, rx as rx, tx as tx from log_vps_bw");

 while($rs=mysqli_fetch_assoc($sql))
{ 
?>
open = <?echo $rs['rx'];?>;
close = <?echo $rs['tx'];?>;
date = <?echo $rs['date'];?>;
data.push({ date: date, open: open, close: close });
<? } ?>

chart2.data = data;

var dateAxis = chart2.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 50;

var valueAxis = chart2.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;

var series = chart2.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.openValueY = "open";
series.dataFields.valueY = "close";
series.tooltipText = "rx: {openValueY.value} tx: {valueY.value}";
series.sequencedInterpolation = true;
series.fillOpacity = 0.3;
series.strokeWidth = 3;
series.defaultState.transitionDuration = 1000;
series.tensionX = 0.8;

var series2 = chart2.series.push(new am4charts.LineSeries());
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "open";
series2.sequencedInterpolation = true;
series2.defaultState.transitionDuration = 1500;
series.strokeWidth = 3;
series2.stroke = chart2.colors.getIndex(6);
series2.tensionX = 0.8;

// Add vertical scrollbar
chart2.scrollbarY = new am4core.Scrollbar();
chart2.scrollbarY.marginLeft = 0;

chart2.cursor = new am4charts.XYCursor();
chart2.cursor.xAxis = dateAxis;
chart2.scrollbarX = new am4core.Scrollbar();
chart.cursor.behavior = "zoomX";

那么我的时间格式就像11:36:52。在提交的查询时间中有时间值

Answer 1

首先分解来自数据库的时间变量。假设我的变量和值是

$rs['date'] = "10:30:45";
$time = explode(":",$rs['dt']);

在我的编码更改中

date = <?php $rs['date']; ?>;     

进入

 date = new Date(0,0,0,<?= $time[0]; ?>,<?= $time[1]; ?>,<?= $time[2]; ?>,);

然后在 var dateaxis 线之后设置标签的间隔，例如

dateAxis.baseInterval = {
"timeUnit": "second",
"count": 1
};

此更改使我的图表成为基于时间的图表。它对我来说效果很好，谢谢。