javascript - [已解决]ApexCharts.js:如何为折线图中的轴标签设置固定值
问题描述
我目前正在使用 ApexChart 来显示折线图。
问题:
我想知道是否有办法设置固定轴标签值。
解决方案:
通过将x轴设置为type: category
并设置来解决tickAmount
。(请注意,该解决方案不允许您以任何您想要的方式直接设置 x 轴标签,但允许您设置 x 轴标签数组并调整要显示的标签tickAmount
。)
需要注意的事项
- 确保您的 apexcharts 版本是最新的。设置
tickAmount
为type: 'category'
最近的更新(截至本文)。(https://github.com/apexcharts/apexcharts.js/releases/tag/v3.20.1) - 系列数据必须是 number[] 类型;所有其他数据类型([number, number][] 或 { x: number, y: number}[])不适用于
tickAmount
.
const options = {
chart: {
type: 'line',
},
series: {
name: 'count',
// data as type number[], number is count.
// 24 data points, one for every hour
data,
},
xaxis: {
type: 'category', // set type to category
categories, // ['00:00', '01:00', '02:00', ..., '23:00'], set array of categories
tickAmount, // set tickAmount to split x-axis
labels: {
show: true,
formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
},
},
}
我的研究努力
例如:
假设我想要一个折线图,它显示 24 小时内每小时的计数,x 轴上 [00:00, 06:00, 12:00, 18:00] 小时标记处有刻度(这部分是我想要的)。
所以我们的图表将有 24 个数据点 [00:00, 01:00, ..., 23:00]。每小时一个。
在 x 轴上,我们有时间(hh:mm)。
在 y 轴上,我们有计数。
如果我只是简单地插入数据集,我会得到下图。
如您所见,ApexCharts 自动设置 x 轴刻度值。
可悲的是,这不是我想要的......同样设置 tickAmount 并没有得到我想要的结果,因为 ApexChart 只是将范围(在本例中为 0-23)除以 tickAmount 以获得它的刻度。可悲的是,没有办法分割轴来获得我想要的结果。
我还认为我可以将 x 轴类型设置为类别,并且只显示每个第 n 个标签,但该选项似乎也不存在。
以下是我传递给 apexcharts 的选项
const options = {
chart: {
type: 'line',
},
series: {
name: 'count',
data, // data as type [number, number][], first number is date, second number is count. 24 data points. one for every hour.
},
xaxis: {
tickAmount, // setting this didn't help
labels: {
show: true,
formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
},
},
}
更新 1:我尝试了以下更改,但无济于事,我只得到了 24 个 xaxis 标签......
- 将 xaxis 类型更改为
category
- 添加类别
- 改变
tickAmount
- 改变数据类型(
[number, number][]
,{ x: number, y: number}[]
,number[]
)
const options = {
chart: {
type: 'line',
},
series: {
name: 'count',
// data as...
// type [number, number][], first number is date, second number is count.
// type { x: number, y: number }[], x is date, y is count.
// type number[], number is count.
// 24 data points, one for every hour
// I tried all data formats and nothing changed
data,
},
xaxis: {
type: 'category',
categories, // ['00:00', '01:00', '02:00', ..., '23:00'],
tickAmount, // setting this didn't help
labels: {
show: true,
formatter: (val: string) => formatDateToHHmm(val), // just formats date to hh:mm format
},
},
}
解决方案
如果您知道 x 轴标签应该是什么,则可以将它们作为数组包含在categories
属性中:
var options = {
series: [{
data: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
tickAmount: 10 // optional tickAmount value
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
即使标签并不总是 00:00 - 23:00,您也可以根据数据进行小时计算,将它们推送到数组,然后将其分配给categories
属性。
例如:
let timestamps = [1599675360368, 1599678960368, 1599682560368]; // using only 3 timestamps for this, but in your data you may have up to 24
let hours = timestamps.map(i => new Date(i).getHours().toString() + ":00"); // this would become your categories array
console.log(hours);
推荐阅读
- oracle-apex - 如何在oracle apex中单击按钮时使用选择列表值重定向另一个页面?
- python - 如何使用 pandas 数据框向 html 表添加子标题以及如何将数据框数据访问到 html 表?
- android - 收缩资源不适用于库模块
- java - 覆盖文件上传拦截器的 Struts 2 错误消息
- python - Python将for循环结果放入数组变量中
- javascript - 删除 Fabricjs 中的所有零不透明度元素
- swift - 减少进行日期计算所需的时间
- java - 使用 java 8 的设计模式建议/实现
- sql - 如何在日期更改时从 SQL Server 检索前一行值
- python - “NoneType”对象没有属性(外键)csv?