# 时间笛卡尔轴

¥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 given labels 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

对于 minmax 属性,值必须是你的日期适配器可解析的 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