Chart.js

# 坐标轴

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

在径向图表中，例如雷达图或极坐标图，存在一个单独的坐标轴，用于在角度和径向方向上映射点。这些被称为 '径向坐标轴'.

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

  • 支持多个 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]

名称 类型 默认值 描述
type string 正在使用的刻度类型。可以创建自定义刻度，并使用字符串键注册。这允许更改图表坐标轴的类型。
alignToPixels boolean false 将像素值对齐到设备像素。
backgroundColor Color 刻度区域的背景颜色。
border object 边框配置。 更多...
display boolean|string true 控制坐标轴的全局可见性 (true 时可见，false 时隐藏)。当 display: 'auto' 时，仅当至少一个关联的数据集可见时，坐标轴才可见。
grid object 网格线配置。 更多...
min number 用户定义的刻度最小值，覆盖数据中的最小值。 更多...
max number number
用户定义的刻度最大值，覆盖数据中的最大值。 更多... boolean false reverse
boolean boolean|string false 反转刻度。
stacked number boolean
数据是否应该堆叠。 更多... number suggestedMax
number object 计算最大数据值时使用的调整。 更多...
suggestedMin number 0 number

计算最小数据值时使用的调整。 更多...

注意

ticks

Tick 配置。 更多...

weight

名称 类型 number 默认值 描述
用于对坐标轴进行排序的权重。权重越高，距离图表区域越远。 Color # 刻度配置 这些仅是所有坐标轴支持的通用刻度选项。有关该坐标轴的所有可用刻度选项，请参阅特定坐标轴文档。 # 所有坐标轴的通用刻度选项
命名空间：options.scales[scaleId].ticks 可脚本化 2 backdropColor
Yes 'rgba(255, 255, 255, 0.75)' 标签背景的颜色。
display boolean true backdropPadding
Padding Color # 刻度配置 标签背景的填充。 callback
function 返回刻度值的字符串表示形式，因为它应该在图表上显示。请参阅 回调. # 刻度配置 如果为 true，则显示刻度标签。 color
Chart.defaults.color object {} 刻度线的颜色。.
font number 3 Font
Chart.defaults.font boolean # 刻度配置 请参阅 字体 major
Major 刻度配置 Color # 刻度配置 `` padding
number number # 刻度配置 0 设置刻度标签到坐标轴的偏移量
showLabelBackdrop number 0 true 用于径向刻度，false 用于其他刻度

如果为 true，则在刻度标签后面绘制背景。

textStrokeColor

Color

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

文本周围的描边颜色。

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

textStrokeWidth

number

文本周围的描边宽度。

z

number

命名空间：options.scales[scaleId]

名称 刻度层的 z 索引。在刻度绘制在图表区域时很有用。值 <= 0 在数据集下方绘制，> 0 在上方绘制。 描述
# 坐标轴范围设置 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 suggestedMax 和 suggestedMin 设置仅更改用于对坐标轴进行缩放的数据值。这些对于扩展坐标轴的范围同时保持自动拟合行为很有用。
在此示例中，最大的正值为 50，但数据最大值扩展到 100。但是，由于最低数据值低于 suggestedMin 设置，因此会被忽略。 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 与 suggested* 设置相比，min 和 max 设置为坐标轴设置明确的末端。设置这些设置时，某些数据点可能不可见。
# 堆叠 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 默认情况下，数据不会堆叠。如果值刻度 (水平图表上的 y 轴) 的 stacked 选项为 true，则正值和负值将分别堆叠。此外，可以为每个数据集定义 stack 选项，以进一步划分为堆叠组 更多...。对于某些图表，您可能希望将正值和负值堆叠在一起。可以通过指定 stacked: 'single' 来实现。
# 回调 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 有一些配置回调，可用于在更新过程的不同点更改刻度中的参数。这些选项在坐标轴选项的顶层提供。
参数 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 beforeUpdate
axis 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 在更新过程开始之前调用的回调。
beforeSetDimensions 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 axis
在设置维度之前运行的回调。 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 afterSetDimensions
axis 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 在设置维度之后运行的回调。
beforeDataLimits 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 axis
在确定数据限制之前运行的回调。 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 afterDataLimits
axis 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 在确定数据限制之后运行的回调。
beforeBuildTicks 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 axis
在创建刻度之前运行的回调。 鉴于坐标轴范围设置的数量，了解它们之间的相互作用非常重要。 afterBuildTicks

axis

在创建刻度之后运行的回调。对过滤刻度很有用。

beforeTickToLabelConversion

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

axis

在将刻度转换为字符串之前运行的回调。

afterTickToLabelConversion

axis