# 笛卡尔轴

¥Cartesian Axes

遵循笛卡尔网格的轴称为 '笛卡尔轴'。笛卡尔坐标轴用于折线图、柱状图和气泡图。默认情况下，Chart.js 中包含四个笛卡尔坐标轴。

¥Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar, and bubble charts. Four cartesian axes are included in Chart.js by default.

# 视觉组件

¥Visual Components

笛卡尔轴由可以单独配置的视觉组件组成。这些组件是：

¥A cartesian axis is composed of visual components that can be individually configured. These components are:

# 边框

¥Border

轴边界绘制在轴的边缘，在图表区域旁边。在下图中，它被绘制成红色。

¥The axis border is drawn at the edge of the axis, beside the chart area. In the image below, it is drawn in red.

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        border: {
          color: 'red'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        border: {
          color: 'red'
        }
      }
    }
  }
};

# 网格线

¥Grid lines

轴的网格线绘制在图表区域上。在下图中，它们是红色的。

¥The grid lines for an axis are drawn on the chart area. In the image below, they are red.

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          color: 'red',
          borderColor: 'grey',
          tickColor: 'grey'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          color: 'red',
          borderColor: 'grey',
          tickColor: 'grey'
        }
      }
    }
  }
};

# 刻度和刻度线

¥Ticks and Tick Marks

刻度表示轴上显示为标签的数据值。刻度线是网格线从轴边界到标签的扩展。在此示例中，刻度标记以红色绘制，而刻度标签以蓝色绘制。

¥Ticks represent data values on the axis that appear as labels. The tick mark is the extension of the grid line from the axis border to the label. In this example, the tick mark is drawn in red while the tick label is drawn in blue.

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          tickColor: 'red'
        },
        ticks: {
          color: 'blue',
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          tickColor: 'red'
        },
        ticks: {
          color: 'blue',
        }
      }
    }
  }
};

# 标题

¥Title

轴的标题组件用于标记数据。在下面的示例中，它以红色显示。

¥The title component of the axis is used to label the data. In the example below, it is shown in red.

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        title: {
          color: 'red',
          display: true,
          text: 'Month'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        title: {
          color: 'red',
          display: true,
          text: 'Month'
        }
      }
    }
  }
};

# 通用配置

¥Common Configuration

注意

这些只是所有笛卡尔轴支持的常见选项。有关该轴的所有可用选项，请参阅特定轴文档。

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

# 所有笛卡尔轴的通用选项

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

# 坐标轴位置

¥Axis Position

轴可以定位在图表的边缘、图表区域的中心，或者相对于数据值动态定位。

¥An axis can either be positioned at the edge of the chart, at the center of the chart area, or dynamically with respect to a data value.

要将轴定位在图表的边缘，请将 position 选项设置为以下之一：'top'、'left'、'bottom'、'right'。要将轴定位在图表区域的中心，请将 position 选项设置为 'center'。在此模式下，要么必须指定 axis 选项，要么轴 ID 必须以字母 'x' 或 'y' 开头。这样 chart.js 就知道它是哪种轴（水平或垂直）。要根据数据值定位轴，请将 position 选项设置为一个对象，例如：

¥To position the axis at the edge of the chart, set the position option to one of: 'top', 'left', 'bottom', 'right'. To position the axis at the center of the chart area, set the position option to 'center'. In this mode, either the axis option must be specified or the axis ID has to start with the letter 'x' or 'y'. This is so chart.js knows what kind of axis (horizontal or vertical) it is. To position the axis with respect to a data value, set the position option to an object such as:

{
    x: -20
}

这会将轴定位在 ID 为 "x" 的轴上的值 -20 处。对于笛卡尔轴，只能指定 1 个轴。

¥This will position the axis at a value of -20 on the axis with ID "x". For cartesian axes, only 1 axis may be specified.

# 标尺边框

¥Scale Bounds

bounds 属性控制比例边界策略（被 min/max 选项绕过）。

¥The bounds property controls the scale boundary strategy (bypassed by min/max options).

'data'：确保数据完全可见，外面的标签被移除

¥'data': makes sure data are fully visible, labels outside are removed
'ticks'：确保刻度完全可见，外部数据被截断

¥'ticks': makes sure ticks are fully visible, data outside are truncated

# 刻度配置

¥Tick Configuration

注意

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

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

# 所有笛卡尔轴的通用刻度选项

¥Common tick options to all cartesian axes

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

¥Namespace: options.scales[scaleId].ticks

名称	类型	默认	描述
`align`	`string`	`'center'`	沿轴的刻度对齐。可以是 `'start'`、`'center'`、`'end'` 或 `'inner'`。`inner` alignment 表示水平轴的第一个刻度对齐 `start`，最后一个刻度对齐 `end`
`crossAlign`	`string`	`'near'`	垂直于轴的刻度对齐。可以是 `'near'`、`'center'` 或 `'far'`。见刻度对齐
`sampleSize`	`number`	`ticks.length`	决定适合多少标签时要检查的刻度数。设置较小的值会更快，但当标签长度变化很大时可能不太准确。
`autoSkip`	`boolean`	`true`	如果为真，则自动计算可以显示多少标签并相应地隐藏标签。在跳过任何标签之前，标签将旋转到 `maxRotation`。无论如何关闭 `autoSkip` 以显示所有标签。
`autoSkipPadding`	`number`	`3`	启用 `autoSkip` 时在水平轴上的刻度之间填充。
`includeBounds`	`boolean`	`true`	定义的 `min` 和 `max` 值是否应显示为刻度，即使它们不是 "nice"。
`labelOffset`	`number`	`0`	从刻度中心点偏移标签的距离（以像素为单位）（x 轴在 x 方向，y 轴在 y 方向）。注意：这可能会导致边缘的标签被画布边缘裁剪
`maxRotation`	`number`	`50`	旋转以压缩标签时刻度标签的最大旋转。注意：除非必要，否则不会发生轮换。注意：仅适用于水平刻度。
`minRotation`	`number`	`0`	刻度标签的最小旋转。注意：仅适用于水平刻度。
`mirror`	`boolean`	`false`	围绕轴翻转刻度标签，在图表内部而不是外部显示标签。注意：仅适用于垂直刻度。
`padding`	`number`	`0`	刻度标签和轴之间的填充。当设置在垂直轴上时，这适用于水平 (X) 方向。当设置在水平轴上时，这适用于垂直 (Y) 方向。
`maxTicksLimit`	`number`	`11`	要显示的最大刻度线和网格线数。

# 所有轴的通用刻度选项

¥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 绘制在顶部。

# 刻度对齐

¥Tick Alignment

刻度的对齐主要使用刻度配置对象上的两个设置来控制：align 和 crossAlign。align 设置配置标签如何沿轴方向与刻度线对齐（即水平轴为水平，垂直轴为垂直）。crossAlign 设置配置标签如何在垂直方向上与刻度线对齐（即水平轴为垂直，垂直轴为水平）。在下面的示例中，crossAlign 设置用于在 Y 轴上左对齐标签。

¥The alignment of ticks is primarily controlled using two settings on the tick configuration object: align and crossAlign. The align setting configures how labels align with the tick mark along the axis direction (i.e. horizontal for a horizontal axis and vertical for a vertical axis). The crossAlign setting configures how labels align with the tick mark in the perpendicular direction (i.e. vertical for a horizontal axis and horizontal for a vertical axis). In the example below, the crossAlign setting is used to left align the labels on the Y axis.

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far',
        }
      }
    }
  }
};const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far',
        }
      }
    }
  }
};

注意

仅当满足以下先决条件时，crossAlign 设置才有效：

¥The crossAlign setting is only effective when these preconditions are met:

滴答旋转是 0

¥tick rotation is 0
轴位置为 'top'、'left'、'bottom' 或 'right'

¥axis position is 'top', 'left', 'bottom' or 'right'

# 坐标轴 ID

¥Axis ID

属性 dataset.xAxisID 或 dataset.yAxisID 必须与 scales 属性匹配。如果使用多轴图表，则尤其需要这样做。

¥The properties dataset.xAxisID or dataset.yAxisID have to match to scales property. This is especially needed if multi-axes charts are used.

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // This dataset appears on the first axis
            yAxisID: 'first-y-axis'
        }, {
            // This dataset appears on the second axis
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            'first-y-axis': {
                type: 'linear'
            },
            'second-y-axis': {
                type: 'linear'
            }
        }
    }
});

# 创建多个轴

¥Creating Multiple Axes

使用笛卡尔坐标轴，可以创建多个 X 轴和 Y 轴。为此，你可以将多个配置对象添加到 xAxes 和 yAxes 属性。添加新轴时，请务必确保指定新轴的类型，因为在这种情况下不使用默认类型。

¥With cartesian axes, it is possible to create multiple X and Y axes. To do so, you can add multiple configuration objects to the xAxes and yAxes properties. When adding new axes, it is important to ensure that you specify the type of the new axes as default types are not used in this case.

在下面的示例中，我们创建了两个 Y 轴。然后我们使用 yAxisID 属性将数据集映射到它们正确的轴。

¥In the example below, we are creating two Y axes. We then use the yAxisID property to map the datasets to their correct axes.

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',
            // This binds the dataset to the left y axis
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',
            // This binds the dataset to the right y axis
            yAxisID: 'right-y-axis'
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            'left-y-axis': {
                type: 'linear',
                position: 'left'
            },
            'right-y-axis': {
                type: 'linear',
                position: 'right'
            }
        }
    }
});