Chart.js 中文网

# 坐标轴

¥Axes

轴是图表的组成部分。它们用于确定数据如何映射到图表上的像素值。在笛卡尔图表中，有 1 个或多个 X 轴和 1 个或多个 Y 轴将点映射到二维画布上。这些轴称为 '笛卡尔坐标轴'。

¥Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is 1 or more X-axis and 1 or more Y-axis to map points onto the 2-dimensional canvas. These axes are known as 'cartesian axes'.

在雷达图或极地面积图等径向图中，有一个轴在角度和径向方向上映射点。这些被称为 '径向轴'。

¥In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as 'radial axes'.

Chart.js >v2.0 中的刻度明显更强大，但也与 v1.0 的刻度不同。

¥Scales in Chart.js >v2.0 are significantly more powerful, but also different from those of v1.0.

  • 支持多个 X & Y 轴。

    ¥Multiple X & Y axes are supported.

  • 内置标签自动跳过功能可检测可能重叠的刻度线和标签，并删除每第 n 个标签以保持内容正常显示。

    ¥A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displayed normally.

  • 支持缩放标题。

    ¥Scale titles are supported.

  • 无需编写全新的图表类型即可扩展新的刻度类型。

    ¥New scale types can be extended without writing an entirely new chart type.

# 默认比例

¥Default scales

笛卡尔图表的默认 scaleId 是 'x' 和 'y'。对于径向图表：'r'。每个数据集都映射到它需要的每个轴（x、y 或 r）的比例。数据集映射到的 scaleId 由 xAxisID、yAxisID 或 rAxisID 确定。如果未指定轴的 ID，则使用该轴的第一个刻度。如果找不到轴的刻度，则会创建一个新刻度。

¥The default scaleId's for cartesian charts are 'x' and 'y'. For radial charts: 'r'. Each dataset is mapped to a scale for each axis (x, y or r) it requires. The scaleId's that a dataset is mapped to is determined by the xAxisID, yAxisID or rAxisID. If the ID for an axis is not specified, the first scale for that axis is used. If no scale for an axis is found, a new scale is created.

一些例子：

¥Some examples:

下面的图表将有 'x' 和 'y' 刻度：

¥The following chart will have 'x' and 'y' scales:

let chart = new Chart(ctx, {
  type: 'line'
});

下面的图表将具有 'x' 和 'myScale' 刻度：

¥The following chart will have scales 'x' and 'myScale':

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      data: [1, 2, 3]
    }]
  },
  options: {
    scales: {
      myScale: {
        type: 'logarithmic',
        position: 'right', // `axis` is determined by the position as `'y'`
      }
    }
  }
});

下面的图表将具有 'xAxis' 和 'yAxis' 刻度：

¥The following chart will have scales 'xAxis' and 'yAxis':

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      yAxisID: 'yAxis'
    }]
  },
  options: {
    scales: {
      xAxis: {
        // The axis for this scale is determined from the first letter of the id as `'x'`
        // It is recommended to specify `position` and / or `axis` explicitly.
        type: 'time',
      }
    }
  }
});

下面的图表将有 'r' 刻度：

¥The following chart will have 'r' scale:

let chart = new Chart(ctx, {
  type: 'radar'
});

下面的图表将有 'myScale' 刻度：

¥The following chart will have 'myScale' scale:

let chart = new Chart(ctx, {
  type: 'radar',
  scales: {
    myScale: {
      axis: 'r'
    }
  }
});

# 通用配置

¥Common Configuration

注意

这些只是所有轴都支持的通用选项。请参阅特定轴文档，了解该轴的所有可用选项。

¥These are only the common options supported by all axes. Please see specific axis documentation for all the available options for that axis.

# 所有轴的通用选项

¥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 用于对轴进行排序的权重。权重越高，离图表区域越远。

# 刻度配置

¥Tick Configuration

注意

这些只是所有轴都支持的常见刻度选项。请参阅特定轴文档，了解该轴的所有可用刻度选项。

¥These are only the common tick options supported by all axes. Please see specific axis documentation for all the available tick options for that axis.

# 所有轴的通用刻度选项

¥Common tick options to all axes

命名空间：options.scales[scaleId].ticks

¥Namespace: options.scales[scaleId].ticks

名称 类型 可编写脚本 默认 描述
backdropColor Color 是的 'rgba(255, 255, 255, 0.75)' 标签背景的颜色。
backdropPadding Padding 2 标签背景的填充。
callback function 返回应显示在图表上的刻度值的字符串表示形式。见 callback。
display boolean true 如果为真，则显示刻度标签。
color Color 是的 Chart.defaults.color 刻度的颜色。
font Font 是的 Chart.defaults.font 见 字体
major object {} 主要刻度配置。
padding number 3 设置刻度标签相对于轴的偏移量
showLabelBackdrop boolean 是的 true 用于径向刻度，false 否则 如果为真，则在刻度标签后面绘制背景。
textStrokeColor Color 是的 `` 文本周围笔划的颜色。
textStrokeWidth number 是的 0 文本周围的笔画宽度。
z number 0 刻度层的 z-index。在图表区域绘制刻度时很有用。值 <= 0 绘制在数据集下方， > 0 绘制在顶部。

# 坐标轴范围设置

¥Axis Range Settings

考虑到轴范围设置的数量，了解它们如何相互作用是很重要的。

¥Given the number of axis range settings, it is important to understand how they all interact with each other.

suggestedMax 和 suggestedMin 设置仅更改用于缩放轴的数据值。这些对于扩展轴的范围同时保持自动适应行为非常有用。

¥The suggestedMax and suggestedMin settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto-fit behaviour.

let minDataValue = Math.min(mostNegativeValue, options.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.suggestedMax);

在此示例中，最大正值是 50，但数据最大值扩展到 100。但是，由于最低数据值低于 suggestedMin 设置，因此将被忽略。

¥In this example, the largest positive value is 50, but the data maximum is expanded out to 100. However, because the lowest data value is below the suggestedMin setting, it is ignored.

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            y: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }
    }
});

与 suggested* 设置相反，min 和 max 设置为轴设置了明确的端点。设置这些后，某些数据点可能不可见。

¥In contrast to the suggested* settings, the min and max settings set explicit ends to the axes. When these are set, some data points may not be visible.

# 堆叠

¥Stacking

默认情况下，数据不堆叠。如果值刻度（水平图表上的 y 轴）的 stacked 选项为 true，则正值和负值分别堆叠。此外，可以为每个数据集定义 stack 选项，以进一步划分为堆栈组 更多...。对于某些图表，你可能希望将正值和负值堆叠在一起。这可以通过指定 stacked: 'single' 来实现。

¥By default, data is not stacked. If the stacked option of the value scale (y-axis on horizontal chart) is true, positive and negative values are stacked separately. Additionally, a stack option can be defined per dataset to further divide into stack groups more.... For some charts, you might want to stack positive and negative values together. That can be achieved by specifying stacked: 'single'.

# 回调

¥Callbacks

有许多配置回调可用于在更新过程的不同点更改秤中的参数。这些选项在轴选项的顶层提供。

¥There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process. The options are supplied at the top level of the axis options.

命名空间：options.scales[scaleId]

¥Namespace: options.scales[scaleId]

名称 参数 描述
beforeUpdate axis 在更新过程开始之前调用的回调。
beforeSetDimensions axis 在设置维度之前运行的回调。
afterSetDimensions axis 在设置维度后运行的回调。
beforeDataLimits axis 在确定数据限制之前运行的回调。
afterDataLimits axis 在确定数据限制后运行的回调。
beforeBuildTicks axis 在创建分时之前运行的回调。
afterBuildTicks axis 创建分时后运行的回调。用于过滤分时。
beforeTickToLabelConversion axis 在分时转换为字符串之前运行的回调。
afterTickToLabelConversion axis 在分时转换为字符串后运行的回调。
beforeCalculateLabelRotation axis 在确定逐笔分时之前运行的回调。
afterCalculateLabelRotation axis 确定分时轮换后运行的回调。
beforeFit axis 在比例适合画布之前运行的回调。
afterFit axis 在比例适合画布后运行的回调。
afterUpdate axis 在更新过程结束时运行的回调。

# 更新轴默认值

¥Updating Axis Defaults

秤的默认配置可以轻松更改。你需要做的就是将新选项设置为 Chart.defaults.scales[type]。

¥The default configuration for a scale can be easily changed. All you need to do is set the new options to Chart.defaults.scales[type].

例如，要为所有线性刻度设置最小值 0，你可以执行以下操作。在此时间之后创建的任何线性比例现在都将具有最小值 0。

¥For example, to set the minimum value of 0 for all linear scales, you would do the following. Any linear scales created after this time would now have a minimum of 0.

Chart.defaults.scales.linear.min = 0;

# 创建新轴

¥Creating New Axes

要创建新轴，请参见 开发者文档。

¥To create a new axis, see the developer docs.