我在 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。在提交的查询时间中有时间值
最佳答案
首先分解来自数据库的时间变量。假设我的变量和值是
$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
};
此更改使我的图表成为基于时间的图表。它对我来说效果很好,谢谢。
关于javascript - am4charts 不适用于时间变量,但它适用于 autoid 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59798306/