Chart.js 坐标轴

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

在径向图表（例如雷达图或极地区域图）中，有一个轴映射角度和径向方向上的点。 这些被称为“径向轴”。

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

• 支持多个 X 和 Y 轴。
• 内置标签自动跳过功能检测可能重叠的刻度和标签，并删除每第 n 个标签以保持正常显示。
• 支持比例标题。
• 无需编写全新的图表类型即可扩展新的刻度类型。

默认比例

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

下面是一些例子：

以下图表将具有“x”和“y”比例：

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

下面的图表将有刻度“x”和“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”：

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”比例：

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

以下图表将具有“myScale”比例：

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

常用配置

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

所有轴的通用选项

命名空间：options.scales[scaleId]

Tick 配置

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

所有轴的通用刻度选项

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

轴范围设置

鉴于轴范围设置的数量，了解它们如何相互交互非常重要。

建议的最大值和建议的最小值设置仅更改用于缩放轴的数据值。 这些对于在保持自动拟合行为的同时扩展轴的范围很有用。

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

在此示例中，最大正值为 50，但数据最大值扩展为 100。但是，由于最低数据值低于建议的最小值设置，因此将其忽略。

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
            }
        }
    }
});

与建议的* 设置相反，最小和最大设置将明确的结束设置为轴。 设置这些后，某些数据点可能不可见。

堆叠

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

回调

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

命名空间：options.scales[scaleId]

更新轴默认值

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

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

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