笛卡尔轴(Cartesian Axes)

通用配置

所有包含笛卡尔轴的图表都支持多种通用选项。

名称类型默认值描述
autoSkipBooleantrue如果为 true，则自动计算可以显示的标签数量并相应地隐藏其他标签。为 false 则任何时候都显示所有的标签。
autoSkipPaddingNumber0启用autoSkip时，在水平轴上的刻度之间进行填充。 注意: 仅适用于水平刻度
labelOffsetNumber以像素为单位，用于从标记的中心点（x轴的y方向和y轴的x方向）偏移标签。注意: 这可能会导致边缘的标签被canvas边缘裁剪掉
maxRotationNumber90刻度标签的最大旋转角度。 注意: 必要时才会发生旋转 注意: 仅适用于水平刻度
minRotationNumber0刻度标签的最小旋转。注意：仅适用于水平刻度
mirrorBooleanfalse翻转坐标轴上的刻度标签，在图表内显示标签而不是外部。注意：仅适用于垂直刻度
paddingNumber10在刻度标签和坐标轴之间填充。注意：仅适用于水平刻度

坐标轴ID

属性dataset.xAxisID或dataset.yAxisID必须与比例属性scales.xAxes.id或scales.yAxes.id匹配。尤其是在使用多轴图表时，这些属性尤为重要。

创建多坐标轴

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

  1. var myChart = new Chart(ctx, {
  2.     type: 'line',
  3.     data: {
  4.         datasets: [{
  7.             // 将数据集绑定到左侧的y轴
  8.             yAxisID: 'left-y-axis'
  9.         }, {
  10.             data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
  11.             label: 'Right dataset',
  13.             // 将数据及绑定到右侧的y轴
  14.             yAxisID: 'right-y-axis',
  15.         }],
  16.         labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  17.     options: {
  18.         scales: {
  19.             yAxes: [{
  20.                 id: 'left-y-axis',
  21.                 type: 'linear',
  22.                 position: 'left'
  23.             }, {
  24.                 id: 'right-y-axis',
  25.                 type: 'linear',
  26.                 position: 'right'
  27.             }]
  28.         }
  29. });