Chart.js 中文网

# 选项

# 选项解析

使用依赖于上下文的路由从上到下解析选项。

# 图表级别选项

  • 选项
  • overrides[config.type]
  • 默认值

# 数据集级别选项

如果未指定，dataset.type 默认为 config.type。

  • 数据集
  • options.datasets[dataset.type]
  • 选项
  • overrides [config.type].datasets[dataset.type]
  • defaults.datasets[dataset.type]
  • 默认值

# 数据集动画选项

  • dataset.animation
  • options.datasets[dataset.type].animation
  • options.animation
  • overrides [config.type].datasets[dataset.type].animation
  • defaults.datasets[dataset.type].animation
  • defaults.animation

# 数据集元素级别选项

首先在选项名称中使用 elementType 前缀查找每个作用域，然后不使用前缀。 例如，使用 pointRadius 查找 point 元素的 radius，如果没有命中，则使用 radius。

  • 数据集
  • options.datasets[dataset.type]
  • options.datasets[dataset.type].elements[elementType]
  • options.elements[elementType]
  • 选项
  • overrides [config.type].datasets[dataset.type]
  • overrides [config.type].datasets[dataset.type].elements[elementType]
  • defaults.datasets[dataset.type]
  • defaults.datasets[dataset.type].elements[elementType]
  • defaults.elements[elementType]
  • 默认值

# 标尺选项

  • options.scales
  • overrides[config.type].scales
  • defaults.scales
  • defaults.scale

# 插件选项

插件可以提供 additionalOptionScopes 路径数组来额外查找其选项。 对于根范围，使用空字符串： ''. 大多数核心插件也从根范围中获取选项。

  • options.plugins[plugin.id]
  • （选项。[...plugin.additionalOptionScopes]）
  • overrides[config.type].plugins[plugin.id]
  • defaults.plugins[plugin.id]
  • （默认值。[...plugin.additionalOptionScopes]）

# 脚本选项

脚本选项还接受一个函数，该函数为每个基础数据值调用，并采用表示上下文信息的唯一参数 context（请参阅 选项上下文）。 解析器作为第二个参数传递，可用于访问同一上下文中的其他选项。

注意

context 参数应该在可编写脚本的函数中进行验证，因为该函数可以在不同的上下文中调用。 type 字段很适合此验证。

例子：

color: function(context) {
    const index = context.dataIndex;
    const value = context.dataset.data[index];
    return value < 0 ? 'red' :  // draw negative values in red
        index % 2 ? 'blue' :    // else, alternate values in blue and green
        'green';
},
borderColor: function(context, options) {
    const color = options.color; // resolve the value of another scriptable option: 'red', 'blue' or 'green'
    return Chart.helpers.color(color).lighten(0.2);
}

# 可转位选项

可索引选项还接受一个数组，其中每个项目对应于同一索引处的元素。 请注意，如果项目少于数据，则项目将被循环。 在许多情况下，如果支持，使用 function 更合适。

例子：

color: [
    'red',    // color for data at index 0
    'blue',   // color for data at index 1
    'green',  // color for data at index 2
    'black',  // color for data at index 3
    //...
]

# 选项上下文

选项上下文用于在解析选项时给出上下文信息，目前仅适用于 脚本选项。 该对象被保留下来，因此它可用于在调用之间存储和传递信息。

有多个级别的上下文对象：

  • chart
    • dataset
      • data
    • scale
      • tick
      • pointLabel （仅用于径向光栅尺）
    • tooltip

每个级别都继承其父级，并且存储在父级中的任何上下文信息都可以通过子级获得。

上下文对象包含以下属性：

# chart

  • chart: 相关图表
  • type: 'chart'

# dataset

除了 chart

  • active: true 如果元素处于活动状态（悬停）
  • dataset: 索引 datasetIndex 处的数据集
  • datasetIndex: 当前数据集的索引
  • index: 同 datasetIndex
  • mode: 更新模式
  • type: 'dataset'

# data

除了 dataset

  • active: true 如果元素处于活动状态（悬停）
  • dataIndex: 当前数据的索引
  • parsed: 给定 dataIndex 和 datasetIndex 的解析数据值
  • raw: 给定 dataIndex 和 datasetIndex 的原始数据值
  • element: 此数据的元素（点、弧、条等）
  • index: 同 dataIndex
  • type: 'data'

# scale

除了 chart

  • scale: 相关规模
  • type: 'scale'

# 刻度

除了 scale

  • tick: 关联的刻度对象
  • index: 滴答指数
  • type: 'tick'

# pointLabel

除了 scale

  • label: 关联的标签值
  • index: 标签索引
  • type: 'pointLabel'

# tooltip

除了 chart

  • tooltip: 工具提示对象
  • tooltipItems: 工具提示显示的项目