要在ApexCharts.js的线性图表中设置固定的坐标轴标签值,可以使用xaxis
和yaxis
选项来指定自定义的标签值。
下面是一个示例代码:
// 引入 ApexCharts.js 库
import ApexCharts from 'apexcharts';
// 创建一个图表实例
const chart = new ApexCharts(document.querySelector("#chart"), {
series: [{
name: 'Series 1',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}],
chart: {
type: 'line'
},
xaxis: {
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月']
},
yaxis: {
min: 0,
max: 150,
labels: {
formatter: function(value) {
// 自定义标签值
if (value === 0) {
return "最小值";
} else if (value === 150) {
return "最大值";
} else {
return value;
}
}
}
}
});
// 渲染图表
chart.render();
在上面的代码中,通过xaxis
选项设置了自定义的横坐标标签值,其中categories
数组包含了每个标签的名称。
通过yaxis
选项设置了自定义的纵坐标标签值,其中labels
属性中的formatter
函数用来根据数值返回自定义的标签值。
在这个示例中,当数值为0时,返回"最小值",当数值为150时,返回"最大值",其他数值返回原始值。
最后调用render()
方法来渲染图表。