如何在am4chart中创建布尔值轴

Question

我的图表只有两个值

所以我想让yaxis(valueAxis(为0和1，没有0.1,0.2,0.3，…，如果我可以将0更改为"offline"，将1更改为"online"？什么都试过了，但我似乎搞不清楚

Answer 1

要做到这一点，您可以：

• 设置valueAxis.min和valueAxis.max
• 在valueAxis.renderer.minGridDistance中设置一个相当大的值
• 在valueAxis.renderer.labels.template上定义适配器

am4core.ready(() => {
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [
{
date: new Date("2022-12-26").getTime(),
value: 0
},
{
date: new Date("2022-12-27").getTime(),
value: 1
},
{
date: new Date("2022-12-28").getTime(),
value: 0
}
];
let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 1;
valueAxis.renderer.minGridDistance = 1000;

valueAxis.renderer.labels.template.adapter.add("text", (label, target) => {
if (target.dataItem && (target.dataItem.values.value.value === 0)) {
return "Offline";
} else if (target.dataItem && (target.dataItem.values.value.value === 1)) {
return "Online";
} else {
return label;
}
});
let series = chart.series.push(new am4charts.StepLineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.strokeWidth = 2;
series.fillOpacity = 0.2;
});

#chartdiv {
width: 100%;
height: 350px;
}

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>