am4charts 不适用于时间变量，但它适用于 autoid 变量答案

【问题标题】：am4charts doesn't worked for time variables but its worked fine for autoid variablesam4charts 不适用于时间变量，但它适用于 autoid 变量
【发布时间】：2020-05-04 23:42:48
【问题描述】：

我在 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。在查询时间字段中是有时间值

【问题讨论】：

标签： javascript php mysql

【解决方案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 line之后设置标签的间隔

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

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

【讨论】：