问题描述
如何更改编辑或更改图表中的 12:00?不需要,也需要很多空间,我尝试了所有我能做的方法,但并没有消失,我正在尝试从 API(自己制作的 API)获取要显示的数据。请帮忙?
图表js代码:
<script>
// Haetan data omasta APistä
fetch('https://users.metropolia.fi/~noorja/WSK12021/OTIUM02-offical/OTIUM02/API/hrv.PHP')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart
var chart = am4core.create("chartdiv",am4charts.XYChart);
chart.paddingRight = 20;
chart.data = data;
chart.dateFormatter.inputDateFormat = "MM-dd";
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGriddistance = 50;
dateAxis.baseInterval = {
timeUnit: "MM-dd",count: 1
};
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
var series = chart.series.push(new am4charts.StepLineseries());
series.datafields.dateX = "day";
series.datafields.valueY = "value";
series.tooltipText = "{valueY.value}";
series.strokeWidth = 3;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.cursor.fullWidthLineX = true;
chart.cursor.lineX.strokeWidth = 0;
chart.cursor.lineX.fill = chart.colors.getIndex(2);
chart.cursor.lineX.fillOpacity = 0.1;
chart.scrollbarX = new am4core.Scrollbar();
});
</script>
API 文件:
<?PHP header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
//Tästä voi käytä tietokanta ja sessioita
$data1 = array(
array("day"=> "04-21","value"=> 3),array("day"=> "04-22","value"=> 4),array("day"=> "04-23",array("day"=> "04-24","value"=> 2),array("day"=> "04-25","value"=> 5),array("day"=> "04-26",array("day"=> "04-27","value"=> 4)
);
echo(json_encode($data1));
?>
我尝试将 yyyy 原样更改为 MM-dd,然后添加了 12:00。
解决方法
尝试使用 skipEmptyPeriods 属性并删除 baseInterval
以仅在 x 轴上显示指定值:
dateAxis.skipEmptyPeriods = true;
// Haetan data omasta APistä
fetch('https://users.metropolia.fi/~noorja/WSK12021/OTIUM02-offical/OTIUM02/API/hrv.php')
.then((response) => {
return response.json();
})
.then((data1) => {
//console.log(data1);
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart
var chart = am4core.create("chartdiv",am4charts.XYChart);
chart.paddingRight = 20;
chart.data = data1;
chart.dateFormatter.inputDateFormat = "HH:mm";
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.skipEmptyPeriods = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
var series = chart.series.push(new am4charts.StepLineSeries());
series.dataFields.dateX = "day";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY.value}";
series.strokeWidth = 3;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.cursor.fullWidthLineX = true;
chart.cursor.lineX.strokeWidth = 0;
chart.cursor.lineX.fill = chart.colors.getIndex(2);
chart.cursor.lineX.fillOpacity = 0.1;
chart.scrollbarX = new am4core.Scrollbar();
});
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>