# 时间笛卡尔轴
¥Time Cartesian Axis
时标用于显示时间和日期。数据根据数据点之间的时间量传播。在构建刻度时,它会根据刻度的大小自动计算出最舒适的单位。
¥The time scale is used to display times and dates. Data are spread according to the amount of time between data points. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.
# 日期适配器
¥Date Adapters
时间刻度需要日期库和相应的适配器。请从 可用适配器 (opens new window) 中选择。
¥The time scale requires both a date library and a corresponding adapter to be present. Please choose from the available adapters (opens new window).
# 数据集
¥Data Sets
# 输入数据
¥Input Data
见 数据结构。
¥See data structures.
# 日期格式
¥Date Formats
在为时间刻度提供数据时,Chart.js 在内部使用定义为自纪元(1970 年 1 月 1 日午夜,UTC)以来的毫秒数的时间戳。但是,Chart.js 还支持你选择的日期适配器接受的所有格式。如果你想设置 parsing: false
以获得更好的性能,你应该使用时间戳。
¥When providing data for the time scale, Chart.js uses timestamps defined as milliseconds since the epoch (midnight January 1, 1970, UTC) internally. However, Chart.js also supports all of the formats that your chosen date adapter accepts. You should use timestamps if you'd like to set parsing: false
for better performance.
# 配置选项
¥Configuration Options
# 时间轴特定选项
¥Time Axis specific options
命名空间:options.scales[scaleId]
¥Namespace: options.scales[scaleId]
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
min | number |string | 要显示的最小项目。更多... | |
max | number |string | 要显示的最大项目。更多... | |
suggestedMin | number |string | 如果前面没有数据点,则显示的最小项。更多... | |
suggestedMax | number |string | 如果后面没有数据点,则显示的最大项目。更多... | |
adapters.date | object | {} | 外部日期库适配器的选项(如果该适配器需要或支持选项) |
bounds | string | 'data' | 确定比例界限。更多... |
offsetAfterAutoskip | boolean | false | 如果为 true,则柱状图偏移量是使用自动跳过的刻度计算的。 |
ticks.source | string | 'auto' | 分时是如何产生的。更多... |
time.displayFormats | object | 设置不同时间单位的显示方式。更多... | |
time.isoWeekday | boolean |number | false | 如果 boolean 为真且单位设置为 'week',则一周的第一天将为星期一。否则,这将是星期天。如果是 number ,则一周第一天的索引(0 - 星期日,6 - 星期六) |
time.parser | string |function | 日期的自定义解析器。更多... | |
time.round | string | false | 如果已定义,日期将四舍五入到该单位的开头。有关允许的单位,请参见下面的 时间单位。 |
time.tooltipFormat | string | 用于工具提示的格式字符串。 | |
time.unit | string | false | 如果已定义,将强制单位为特定类型。有关详细信息,请参见下面的 时间单位 部分。 |
time.minUnit | string | 'millisecond' | 用于时间单位的最小显示格式。 |
# 所有笛卡尔轴的通用选项
¥Common options to all cartesian axes
命名空间:options.scales[scaleId]
¥Namespace: options.scales[scaleId]
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
bounds | string | 'ticks' | 确定比例界限。更多... |
clip | boolean | true | 如果为 true,则根据比例尺而不是图表区域的大小来裁剪数据集绘图 |
position | string | object | 轴的位置。更多... | |
stack | string | 堆栈组。相同 position 和相同 stack 的轴堆叠。 | |
stackWeight | number | 1 | 堆栈组中秤的重量。用于确定组内比例分配的空间量。 |
axis | string | 这是哪种类型的轴。可能的值是:'x' ,'y' 。如果未设置,则从应为 'x' 或 'y' 的 ID 的第一个字符推断。 | |
offset | boolean | false | 如果为 true,则会在两个边缘添加额外的空间,并且轴会缩放以适合图表区域。对于柱状图,默认设置为 true 。 |
title | object | 缩放标题配置。更多... |
# 所有轴的通用选项
¥Common options to all axes
命名空间:options.scales[scaleId]
¥Namespace: options.scales[scaleId]
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
type | string | 使用的规模类型。可以使用字符串键创建和注册自定义比例。这允许更改图表的轴类型。 | |
alignToPixels | boolean | false | 将像素值与设备像素对齐。 |
backgroundColor | Color | 比例区域的背景颜色。 | |
border | object | 边框配置。更多... | |
display | boolean |string | true | 控制坐标轴全局可见性(true 时可见,false 时隐藏)。当 display: 'auto' 时,仅当至少一个关联数据集可见时,轴才可见。 |
grid | object | 网格线配置。更多... | |
min | number | 用户定义的最小比例数,覆盖数据中的最小值。更多... | |
max | number | 用户定义的最大比例数,覆盖数据中的最大值。更多... | |
reverse | boolean | false | 反转比例。 |
stacked | boolean |string | false | 数据是否应该堆叠。更多... |
suggestedMax | number | 计算最大数据值时使用的调整。更多... | |
suggestedMin | number | 计算最小数据值时使用的调整。更多... | |
ticks | object | 勾选配置。更多... | |
weight | number | 0 | 用于对轴进行排序的权重。权重越高,离图表区域越远。 |
# 时间单位
¥Time Units
支持以下时间测量。这些名称可以作为字符串传递给 time.unit
配置选项以强制使用某个单位。
¥The following time measurements are supported. The names can be passed as strings to the time.unit
config option to force a certain unit.
'millisecond'
'second'
'minute'
'hour'
'day'
'week'
'month'
'quarter'
'year'
例如,要创建一个始终显示每月单位的时间刻度图表,可以使用以下配置。
¥For example, to create a chart with a time scale that always displayed units per month, the following config could be used.
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'month'
}
}
}
}
});
# 显示格式
¥Display Formats
你可以为每个单元指定一个显示格式映射:
¥You may specify a map of display formats with a key for each unit:
millisecond
second
minute
hour
day
week
month
quarter
year
用作值的格式字符串取决于你选择使用的日期适配器。
¥The format string used as a value depends on the date adapter you chose to use.
例如,要将 quarter
单元的显示格式设置为显示月份和年份,可以将以下配置传递给图表构造函数。
¥For example, to set the display format for the quarter
unit to show the month and year, the following config might be passed to the chart constructor.
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
}
}
}
});
# 刻度源
¥Ticks Source
ticks.source
属性控制刻度生成。
¥The ticks.source
property controls the ticks generation.
'auto'
:根据尺度大小和时间选项生成 "optimal" 刻度¥
'auto'
: generates "optimal" ticks based on scale size and time options'data'
:从数据生成刻度(包括来自数据{x|y}
对象的标签)¥
'data'
: generates ticks from data (including labels from data{x|y}
objects)'labels'
:仅从给定labels
的用户生成分时¥
'labels'
: generates ticks from user givenlabels
ONLY
# 解析器
¥Parser
如果此属性定义为字符串,则它被解释为日期适配器用来解析日期的自定义格式。
¥If this property is defined as a string, it is interpreted as a custom format to be used by the date adapter to parse the date.
如果这是一个函数,它必须返回一个可以由日期适配器的 parse
方法处理的类型。
¥If this is a function, it must return a type that can be handled by your date adapter's parse
method.
# 最小最大配置
¥Min Max Configuration
对于 min
和 max
属性,值必须是你的日期适配器可解析的 string
或一个包含自 UNIX 纪元以来经过的毫秒数的数字。在下面的示例中,x 轴将从 2021 年 11 月 7 日开始。
¥For both the min
and max
properties, the value must be string
that is parsable by your date adapter or a number with the amount of milliseconds that have elapsed since UNIX epoch.
In the example below the x axis will start at 7 November 2021.
let chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [{
x: '2021-11-06 23:39:30',
y: 50
}, {
x: '2021-11-07 01:00:28',
y: 60
}, {
x: '2021-11-07 09:00:28',
y: 20
}]
}],
},
options: {
scales: {
x: {
min: '2021-11-07 00:00:00',
}
}
}
});
# 将刻度类型从时间刻度更改为对数/线性刻度。
¥Changing the scale type from Time scale to Logarithmic/Linear scale.
将刻度类型从时间刻度更改为对数/线性刻度时,需要将 bounds: 'ticks'
添加到刻度选项中。更改 bounds
参数是必要的,因为它的默认值是时间刻度的 'data'
。
¥When changing the scale type from Time scale to Logarithmic/Linear scale, you need to add bounds: 'ticks'
to the scale options. Changing the bounds
parameter is necessary because its default value is the 'data'
for the Time scale.
初始配置:
¥Initial config:
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'time',
}
}
}
});
缩放更新:
¥Scale update:
chart.options.scales.x = {
type: 'logarithmic',
bounds: 'ticks'
};
# 内部数据格式
¥Internal data format
内部时间尺度使用自纪元以来的毫秒数
¥Internally time scale uses milliseconds since epoch