Chart.js

# 3.x 迁移指南

Chart.js 3.0 引入了许多重大更改。Chart.js 2.0 于 2016 年 4 月发布。从那时起，随着 Chart.js 的流行和功能集的增长，我们了解了一些关于如何更好地创建图表库的经验教训。为了提高性能、提供新功能并改善可维护性，有必要打破向后兼容性，但我们旨在仅在值得付出代价时这样做。v3 的一些主要亮点包括

  • 大幅 性能 提升，包括能够跳过数据解析并通过 webworkers 并行渲染图表
  • 具有更好默认值的额外可配置性和可脚本选项
  • 完全重写的动画系统
  • 重写的填充插件，包含许多错误修复
  • 文档从 GitBook 迁移到 Vuepress
  • 由 TypeDoc 生成的 API 文档，并经过验证
  • 不再进行 CSS 注入
  • 大量的错误修复
  • 树状抖动

# 最终用户迁移

# 设置和安装

  • 分发文件现在为小写。例如：dist/chart.js。
  • Chart.js 不再提供 Chart.bundle.js 和 Chart.bundle.min.js。如果您使用的是这些构建，请查看 安装 和 集成 文档，了解有关推荐设置 Chart.js 的方法的详细信息。
  • moment 不再作为 npm 依赖项指定。如果您使用 time 或 timeseries 刻度，则必须包含 可用的适配器之一 (在新窗口中打开) 和相应的日期库。您不再需要从构建中排除 moment。
  • 如果提供的画布/上下文已在使用中，则 Chart 构造函数将抛出错误
  • Chart.js 3 是树状抖动的。因此，如果您在项目中将其用作 npm 模块，并希望利用此功能，则需要导入并注册要使用的控制器、元素、刻度和插件，有关要导入的所有可用项目的列表，请查看 集成。如果您通过 script 标签或从 auto 注册路径作为 npm 模块导入 Chart.js，则无需调用 register，在这种情况下，您将无法获得树状抖动的好处。以下是如何注册组件的示例
import { Chart, LineController, LineElement, PointElement, LinearScale, Title } from `chart.js`
Chart.register(LineController, LineElement, PointElement, LinearScale, Title);
const chart = new Chart(ctx, {
    type: 'line',
    // data: ...
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Chart Title'
            }
        },
        scales: {
            x: {
                type: 'linear'
            },
            y: {
                type: 'linear'
            }
        }
    }
})

# 图表类型

  • horizontalBar 图表类型已删除。可以使用新的 indexAxis 选项配置水平条形图

# 选项

对传递给 Chart 构造函数的配置选项进行了一些更改。这些更改在下面有记录。

# 通用更改

  • 可索引选项现在正在循环。backgroundColor: ['red', 'green'] 如果数据点超过 2 个，将导致交替的 'red' / 'green'。
  • 对象数据的输入属性现在可以自由指定，有关详细信息，请查看 数据结构。
  • 大多数选项使用代理进行解析，而不是与默认值合并。除了能够轻松地为不同的上下文启用不同的解析路由外，它还允许在可脚本选项中使用其他已解析的选项。
    • 选项默认情况下是可脚本的和可索引的，除非由于某些原因而被禁用。
    • 可脚本选项接收选项解析器作为第二个参数，用于访问同一上下文中的其他选项。
    • 如果在更早的时候没有找到匹配项，则解析会降级到上级范围。有关详细信息，请查看 选项。

# 特定更改

  • elements.rectangle 现在为 elements.bar
  • hover.animationDuration 现在在 animation.active.duration 中配置
  • responsiveAnimationDuration 现在在 animation.resize.duration 中配置
  • 极区 elements.arc.angle 现在以度数而不是弧度配置。
  • 极区 startAngle 选项现在与 Radar 保持一致，0 在顶部，值为度数。默认值已从 -½π 更改为 0。
  • 甜甜圈 rotation 选项现在以度数表示，0 在顶部。默认值已从 -½π 更改为 0。
  • 甜甜圈 circumference 选项现在以度数表示。默认值已从 2π 更改为 360。
  • 甜甜圈 cutoutPercentage 已重命名为 cutout，并接受以像素为单位的数字和以百分比为单位的字符串，以 % 结尾。
  • scale 选项已删除，取而代之的是 options.scales.r（或任何其他刻度 ID，其中 axis: 'r'）
  • scales.[x/y]Axes 数组已删除。现在直接将刻度配置到 options.scales 对象中，对象键是刻度 ID。
  • scales.[x/y]Axes.barPercentage 已移至数据集选项 barPercentage
  • scales.[x/y]Axes.barThickness 已移至数据集选项 barThickness
  • scales.[x/y]Axes.categoryPercentage 已移至数据集选项 categoryPercentage
  • scales.[x/y]Axes.maxBarThickness 已移至数据集选项 maxBarThickness
  • scales.[x/y]Axes.minBarLength 已移至数据集选项 minBarLength
  • scales.[x/y]Axes.scaleLabel 已重命名为 scales[id].title
  • scales.[x/y]Axes.scaleLabel.labelString 已重命名为 scales[id].title.text
  • scales.[x/y]Axes.ticks.beginAtZero 已重命名为 scales[id].beginAtZero
  • scales.[x/y]Axes.ticks.max 已重命名为 scales[id].max
  • scales.[x/y]Axes.ticks.min 已重命名为 scales[id].min
  • scales.[x/y]Axes.ticks.reverse 已重命名为 scales[id].reverse
  • scales.[x/y]Axes.ticks.suggestedMax 已重命名为 scales[id].suggestedMax
  • scales.[x/y]Axes.ticks.suggestedMin 已重命名为 scales[id].suggestedMin
  • scales.[x/y]Axes.ticks.unitStepSize 已删除。使用 scales[id].ticks.stepSize
  • scales.[x/y]Axes.ticks.userCallback 已重命名为 scales[id].ticks.callback
  • scales.[x/y]Axes.time.format 已重命名为 scales[id].time.parser
  • scales.[x/y]Axes.time.max 已重命名为 scales[id].max
  • scales.[x/y]Axes.time.min 已重命名为 scales[id].min
  • 坐标轴的 scales.[x/y]Axes.zeroLine* 选项已删除。请改用可脚本的刻度选项。
  • 数据集选项 steppedLine 已删除。使用 stepped
  • 图表选项 showLines 已重命名为 showLine，以匹配数据集选项。
  • 图表选项 startAngle 已移至 radial 刻度选项。
  • 要覆盖图表实例中使用的平台类，请在配置对象中传递 platform: PlatformClass。请注意，应传递类，而不是类的实例。
  • 对于甜甜圈、饼图、极区和雷达图，aspectRatio 默认值为 1
  • TimeScale 不再默认从对象数据中读取 t。默认属性为 x 或 y，具体取决于方向。有关如何更改默认值的详细信息，请查看 数据结构。
  • tooltips 命名空间已重命名为 tooltip，以匹配插件名称
  • legend、title 和 tooltip 命名空间已从 options 移至 options.plugins。
  • tooltips.custom 已重命名为 plugins.tooltip.external

# 默认值

  • global 命名空间已从 defaults 中删除。因此，Chart.defaults.global 现在为 Chart.defaults
  • 数据集控制器默认值已重新定位到 overrides。例如，Chart.defaults.line 现在为 Chart.overrides.line
  • 已从默认值中删除 default 前缀。例如，Chart.defaults.global.defaultColor 现在为 Chart.defaults.color
  • defaultColor 已拆分为 color、borderColor 和 backgroundColor
  • defaultFontColor 已重命名为 color
  • defaultFontFamily 已重命名为 font.family
  • defaultFontSize 已重命名为 font.size
  • defaultFontStyle 已重命名为 font.style
  • defaultLineHeight 已重命名为 font.lineHeight
  • 水平条形图的默认工具提示模式已从 'index' 更改为 'nearest'，以匹配垂直条形图
  • legend、title 和 tooltip 命名空间已从 Chart.defaults 移至 Chart.defaults.plugins。
  • elements.line.fill 默认值已从 true 更改为 false。
  • 折线图不再覆盖默认的 interaction 模式。默认值已从 'index' 更改为 'nearest'。

# 刻度

刻度的配置选项是 v3 中最大的更改。xAxes 和 yAxes 数组已删除，坐标轴选项现在是按刻度 ID 键的单个刻度。

下面显示了 v2 配置及其新的 v3 配置

options: {
  scales: {
    xAxes: [{
      id: 'x',
      type: 'time',
      display: true,
      title: {
        display: true,
        text: 'Date'
      },
      ticks: {
        major: {
          enabled: true
        },
        font: function(context) {
          if (context.tick && context.tick.major) {
            return {
              weight: 'bold',
              color: '#FF0000'
            };
          }
        }
      }
    }],
    yAxes: [{
      id: 'y',
      display: true,
      title: {
        display: true,
        text: 'value'
      }
    }]
  }
}

现在，在 v3 中

options: {
  scales: {
    x: {
      type: 'time',
      display: true,
      title: {
        display: true,
        text: 'Date'
      },
      ticks: {
        major: {
          enabled: true
        },
        color: (context) => context.tick && context.tick.major && '#FF0000',
        font: function(context) {
          if (context.tick && context.tick.major) {
            return {
              weight: 'bold'
            };
          }
        }
      }
    },
    y: {
      display: true,
      title: {
        display: true,
        text: 'value'
      }
    }
  }
}
  • 时间刻度选项 distribution: 'series' 已删除，取而代之的是新的刻度类型 timeseries
  • 在时间刻度中，autoSkip 现在默认情况下处于启用状态，以与其他刻度保持一致

# 动画

Chart.js v3 中动画系统已完全重写。现在每个属性都可以单独进行动画。有关详细信息，请参阅动画文档。

# 可定制性

  • 元素的custom属性已被移除。请使用可脚本化的选项
  • 可脚本化选项context对象的hover属性已重命名为active，以与数据标签插件保持一致。

# 交互

  • 为了允许 DRY 配置，添加了用于常见交互选项的根选项范围。options.hover 和 options.plugins.tooltip 现在都从 options.interaction 继承。默认值是在 defaults.interaction 级别定义的，因此默认情况下，悬停和工具提示交互共享相同的模式等。
  • interactions现在仅限于图表区域 + 允许的溢出
  • {mode: 'label'} 已替换为 {mode: 'index'}
  • {mode: 'single'} 已替换为 {mode: 'nearest', intersect: true}
  • modes['X-axis'] 已替换为 {mode: 'index', intersect: false}
  • options.onClick 现在仅限于图表区域
  • options.onClick 和 options.onHover 现在接受chart实例作为第三个参数
  • options.onHover 现在将包装的event作为第一个参数接收。可以通过event.native访问先前的第一个参数值。
  • options.hover.onHover 已移除，请使用 options.onHover。

# 刻度

  • options.gridLines 已重命名为 options.grid
  • options.gridLines.offsetGridLines 已重命名为 options.grid.offset。
  • options.gridLines.tickMarkLength 已重命名为 options.grid.tickLength。
  • options.ticks.fixedStepSize 已不再使用。请使用 options.ticks.stepSize。
  • options.ticks.major 和 options.ticks.minor 已被可脚本化选项替换为刻度字体。
  • Chart.Ticks.formatters.linear 已重命名为 Chart.Ticks.formatters.numeric。
  • options.ticks.backdropPaddingX 和 options.ticks.backdropPaddingY 已在径向线性刻度中替换为 options.ticks.backdropPadding。

# 工具提示

  • xLabel 和 yLabel 已移除。请使用 label 和 formattedValue
  • filter 选项现在将在调用时传递额外的参数，并且应该具有方法签名function(tooltipItem, index, tooltipItems, data)
  • custom 回调现在接受具有tooltip和chart属性的上下文对象
  • 与工具提示选项相关的工具提示模型的所有属性都已移至options属性内。
  • 回调不再获得data参数。工具提示项参数包含图表和数据集而不是
  • 工具提示项的index参数已重命名为dataIndex，value已重命名为formattedValue
  • xPadding 和 yPadding 选项已合并到单个 padding 对象中

# 开发人员迁移

虽然 Chart.js 3 的最终用户迁移相当简单，但开发人员迁移可能更复杂。如果您需要迁移方面的帮助，请在 #dev Discord (opens new window) 频道中寻求帮助。

一些最重大的变化

  • 动画系统已完全重写，性能更高。
    • Element._model 和 Element._view 已不再使用，属性现在直接设置在元素上。您将不得不使用方法 getProps 在大多数方法（如 inXRange/inYRange 和 getCenterPoint）中访问这些属性。请查看Chart.js 提供的元素 (opens new window)以获取示例。
    • 在控制器中构建元素时，现在建议调用updateElement 来提供元素属性。还添加了getSharedOptions和includeOptions等方法，以跳过冗余计算。请查看Chart.js 提供的控制器 (opens new window)以获取示例。
  • 刻度引入了新的解析 API。此 API 采用用户数据并将其转换为更标准的格式。例如，它允许用户将数字数据提供为string，并在必要时将其转换为number。以前，这在图表呈现时动态完成。现在，它是在前面完成的，如果用户以正确的格式提供数据，则可以跳过它以提高性能。如果您使用标准数据格式（如 x/y），您可能不需要执行任何操作。如果您使用自定义数据格式，您将不得不覆盖core.datasetController.js中的某些解析方法。可以在chartjs-chart-financial (opens new window)中找到示例，它使用{o, h, l, c}数据格式。

对控制器进行了一些更直接的更改，但会影响所有控制器

  • 选项
    • global 已从默认名称空间中移除，因为它是多余的，并且有时不一致
    • 数据集默认值现在位于图表类型选项下，而不是相反。由于向后兼容性的原因，这在 2.x 中引入时无法做到。修复它消除了新图表开发人员遇到的最大障碍
    • 刻度默认选项需要根据最终用户迁移部分中的说明进行更新（例如，x 而不是 xAxes，y 而不是 yAxes）
  • updateElement 已更改为 updateElements 并且具有新的方法签名，如下所述。这提供了性能增强，例如允许更轻松地重用对所有元素都通用的计算，并减少函数调用次数

# 已移除

以下属性和方法已被移除

# 从 Chart 中移除

  • Chart.animationService
  • Chart.active
  • Chart.borderWidth
  • Chart.chart.chart
  • Chart.Bar。新图表是通过new Chart创建的，并提供适当的type参数
  • Chart.Bubble。新图表是通过new Chart创建的，并提供适当的type参数
  • Chart.Chart
  • Chart.Controller
  • Chart.Doughnut。新图表是通过new Chart创建的，并提供适当的type参数
  • Chart.innerRadius 现在位于甜甜圈、饼图和极坐标控制器上
  • Chart.lastActive
  • Chart.Legend 已移动到 Chart.plugins.legend._element 并设为私有
  • Chart.Line。新图表是通过new Chart创建的，并提供适当的type参数
  • Chart.LinearScaleBase 现在必须导入，不能从Chart对象访问
  • Chart.offsetX
  • Chart.offsetY
  • Chart.outerRadius 现在位于甜甜圈、饼图和极坐标控制器上
  • Chart.plugins 已替换为 Chart.registry。插件默认值现在位于 Chart.defaults.plugins[id] 中。
  • Chart.plugins.register 已替换为 Chart.register。
  • Chart.PolarArea。新图表是通过new Chart创建的，并提供适当的type参数
  • Chart.prototype.generateLegend
  • Chart.platform。它只包含disableCSSInjection。v3 中从未注入 CSS。
  • Chart.PluginBase
  • Chart.Radar。新图表是通过new Chart创建的，并提供适当的type参数
  • Chart.radiusLength
  • Chart.scaleService 已替换为 Chart.registry。刻度默认值现在位于 Chart.defaults.scales[type] 中。
  • Chart.Scatter。新图表是通过new Chart创建的，并提供适当的type参数
  • Chart.types
  • Chart.Title 已移动到 Chart.plugins.title._element 并设为私有
  • Chart.Tooltip 现在由工具提示插件提供。定位器可以从 tooltipPlugin.positioners 访问
  • ILayoutItem.minSize

# 从数据集控制器中移除

  • BarController.getDatasetMeta().bar
  • DatasetController.addElementAndReset
  • DatasetController.createMetaData
  • DatasetController.createMetaDataset
  • DoughnutController.getRingIndex

# 从元素中移除

  • Element.getArea
  • Element.height
  • Element.hidden 已替换为图表级别状态，可与 getDataVisibility(index) / toggleDataVisibility(index) 一起使用
  • Element.initialize
  • Element.inLabelRange
  • Line.calculatePointY

# 从助手函数中移除

  • helpers.addEvent
  • helpers.aliasPixel
  • helpers.arrayEquals
  • helpers.configMerge
  • helpers.findIndex
  • helpers.findNextWhere
  • helpers.findPreviousWhere
  • helpers.extend。请改用 Object.assign。
  • helpers.getValueAtIndexOrDefault。请改用 helpers.resolve。
  • helpers.indexOf
  • helpers.lineTo
  • helpers.longestText 已设为私有
  • helpers.max
  • helpers.measureText 已设为私有
  • helpers.min
  • helpers.nextItem
  • helpers.niceNum
  • helpers.numberOfLabelLines
  • helpers.previousItem
  • helpers.removeEvent
  • helpers.roundedRect
  • helpers.scaleMerge
  • helpers.where

# 从布局中移除

  • Layout.defaults

# 从刻度中移除

  • LinearScaleBase.handleDirectionalChanges
  • LogarithmicScale.minNotZero
  • Scale.getRightValue
  • Scale.longestLabelWidth
  • Scale.longestTextCache 现在是私有的
  • Scale.margins 现在是私有的
  • Scale.mergeTicksOptions
  • Scale.ticksAsNumbers
  • Scale.tickValues 现在是私有的
  • TimeScale.getLabelCapacity 现在是私有的
  • TimeScale.tickFormatFunction 现在是私有的

# 从插件（图例、标题和工具提示）中移除

  • IPlugin.afterScaleUpdate。请改用 afterLayout
  • Legend.margins 现在是私有的
  • 图例 onClick、onHover 和 onLeave 选项现在除了通过 this 隐式接收外，还会接收图例作为第三个参数。
  • 图例 onClick、onHover 和 onLeave 选项现在接收一个包装的 event 作为第一个参数。以前第一个参数值可以通过 event.native 访问。
  • Title.margins 现在是私有的。
  • 工具提示项的 x 和 y 属性已替换为 element。您可以使用 element.x 和 element.y 或 element.tooltipPosition() 代替。

# 公共 API 的移除

以下公共 API 已被移除。

  • getElementAtEvent 被 chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false) 替换。
  • getElementsAtEvent 被 chart.getElementsAtEventForMode(e, 'index', { intersect: true }, false) 替换。
  • getElementsAtXAxis 被 chart.getElementsAtEventForMode(e, 'index', { intersect: false }, false) 替换。
  • getDatasetAtEvent 被 chart.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false) 替换。

# 私有 API 的移除

以下私有 API 已被移除。

  • Chart._bufferedRender
  • Chart._updating
  • Chart.data.datasets[datasetIndex]._meta
  • DatasetController._getIndexScaleId
  • DatasetController._getIndexScale
  • DatasetController._getValueScaleId
  • DatasetController._getValueScale
  • Element._ctx
  • Element._model
  • Element._view
  • LogarithmicScale._valueOffset
  • TimeScale.getPixelForOffset
  • TimeScale.getLabelWidth
  • Tooltip._lastActive

# 重命名

以下属性在 v3 开发过程中被重命名。

  • Chart.Animation.animationObject 被重命名为 Chart.Animation
  • Chart.Animation.chartInstance 被重命名为 Chart.Animation.chart
  • Chart.canvasHelpers 被合并到 Chart.helpers 中。
  • Chart.elements.Arc 被重命名为 Chart.elements.ArcElement
  • Chart.elements.Line 被重命名为 Chart.elements.LineElement
  • Chart.elements.Point 被重命名为 Chart.elements.PointElement
  • Chart.elements.Rectangle 被重命名为 Chart.elements.BarElement
  • Chart.layoutService 被重命名为 Chart.layouts
  • Chart.pluginService 被重命名为 Chart.plugins
  • helpers.callCallback 被重命名为 helpers.callback
  • helpers.drawRoundedRectangle 被重命名为 helpers.roundedRect
  • helpers.getValueOrDefault 被重命名为 helpers.valueOrDefault
  • LayoutItem.fullWidth 被重命名为 LayoutItem.fullSize
  • Point.controlPointPreviousX 被重命名为 Point.cp1x
  • Point.controlPointPreviousY 被重命名为 Point.cp1y
  • Point.controlPointNextX 被重命名为 Point.cp2x
  • Point.controlPointNextY 被重命名为 Point.cp2y
  • Scale.calculateTickRotation 被重命名为 Scale.calculateLabelRotation
  • Tooltip.options.legendColorBackgroupd 被重命名为 Tooltip.options.multiKeyBackground

# 私有 API 重命名

以下私有 API 已被重命名。

  • BarController.calculateBarIndexPixels 被重命名为 BarController._calculateBarIndexPixels
  • BarController.calculateBarValuePixels 被重命名为 BarController._calculateBarValuePixels
  • BarController.getStackCount 被重命名为 BarController._getStackCount
  • BarController.getStackIndex 被重命名为 BarController._getStackIndex
  • BarController.getRuler 被重命名为 BarController._getRuler
  • Chart.destroyDatasetMeta 被重命名为 Chart._destroyDatasetMeta
  • Chart.drawDataset 被重命名为 Chart._drawDataset
  • Chart.drawDatasets 被重命名为 Chart._drawDatasets
  • Chart.eventHandler 被重命名为 Chart._eventHandler
  • Chart.handleEvent 被重命名为 Chart._handleEvent
  • Chart.initialize 被重命名为 Chart._initialize
  • Chart.resetElements 被重命名为 Chart._resetElements
  • Chart.unbindEvents 被重命名为 Chart._unbindEvents
  • Chart.updateDataset 被重命名为 Chart._updateDataset
  • Chart.updateDatasets 被重命名为 Chart._updateDatasets
  • Chart.updateLayout 被重命名为 Chart._updateLayout
  • DatasetController.destroy 被重命名为 DatasetController._destroy
  • DatasetController.insertElements 被重命名为 DatasetController._insertElements
  • DatasetController.onDataPop 被重命名为 DatasetController._onDataPop
  • DatasetController.onDataPush 被重命名为 DatasetController._onDataPush
  • DatasetController.onDataShift 被重命名为 DatasetController._onDataShift
  • DatasetController.onDataSplice 被重命名为 DatasetController._onDataSplice
  • DatasetController.onDataUnshift 被重命名为 DatasetController._onDataUnshift
  • DatasetController.removeElements 被重命名为 DatasetController._removeElements
  • DatasetController.resyncElements 被重命名为 DatasetController._resyncElements
  • LayoutItem.isFullWidth 被重命名为 LayoutItem.isFullSize
  • RadialLinearScale.setReductions 被重命名为 RadialLinearScale._setReductions
  • RadialLinearScale.pointLabels 被重命名为 RadialLinearScale._pointLabels
  • Scale.handleMargins 被重命名为 Scale._handleMargins

# 更改

本节中列出的 API 在版本 2 中的签名或行为已发生更改。

# 刻度更改

  • Scale.getLabelForIndex 被 scale.getLabelForValue 替换。
  • Scale.getPixelForValue 现在只需要一个参数。对于 TimeScale，该参数必须是自纪元以来的毫秒数。作为性能优化，它可能接受可选的第二个参数，给出数据点的索引。
# 刻度更改
  • Scale.afterBuildTicks 现在与其他回调一样没有参数。
  • Scale.buildTicks 现在预计会返回刻度对象。
  • Scale.convertTicksToLabels 被重命名为 generateTickLabels。现在它预计会设置作为输入给定的刻度的标签属性。
  • Scale.ticks 现在包含对象而不是字符串。
  • 当 autoSkip 选项启用时，Scale.ticks 现在仅包含非跳过的刻度，而不是所有刻度。
  • 刻度现在始终按单调递增的顺序生成。
# 时间刻度更改
  • getValueForPixel 现在返回自纪元以来的毫秒数。

# 控制器更改

# 核心控制器
  • updateHoverStyle 的第一个参数现在是一个对象数组，包含 element、datasetIndex 和 index。
  • resize 的签名或参数已更改，第一个 silent 参数已删除。
# 数据集控制器
  • updateElement 被 updateElements 替换，现在它接受要更新的元素、start 索引、count 和 mode。
  • setHoverStyle 和 removeHoverStyle 现在还接受 datasetIndex 和 index。

# 交互更改

  • 交互模式方法现在返回一个包含 element、datasetIndex 和 index 的对象数组。

# 布局更改

  • ILayoutItem.update 不再有返回值。

# 辅助函数更改

所有辅助函数现在都以扁平化的层次结构公开，例如，Chart.helpers.canvas.clipArea -> Chart.helpers.clipArea

# 画布辅助函数
  • drawPoint 的第二个参数现在是完整的选项对象，因此 style、rotation 和 radius 不再被显式传递。
  • helpers.getMaximumHeight 被 helpers.dom.getMaximumSize 替换。
  • helpers.getMaximumWidth 被 helpers.dom.getMaximumSize 替换。
  • helpers.clear 被重命名为 helpers.clearCanvas，现在它接受 canvas 和可选的 ctx 作为参数。
  • helpers.retinaScale 接受可选的第三个参数 forceStyle，它强制覆盖当前画布样式。forceRatio 不再回退到 window.devicePixelRatio，而是默认为 1。

# 平台更改

  • Chart.platform 不再是图表使用的平台对象。每个图表实例现在都有一个单独的平台实例。
  • Chart.platforms 是一个包含两个可用平台类的对象，BasicPlatform 和 DomPlatform。它还包含 BasePlatform，所有平台都必须扩展的类。
  • 如果传递的画布是 OffscreenCanvas 的实例，则会自动使用 BasicPlatform。
  • isAttached 方法已添加到平台。

# IPlugin 接口更改

  • 所有插件钩子都具有统一的签名，包含 3 个参数：chart、args 和 options。这意味着以下钩子的签名已更改：beforeInit、afterInit、reset、beforeLayout、afterLayout、beforeRender、afterRender、beforeDraw、afterDraw、beforeDatasetsDraw、afterDatasetsDraw、beforeEvent、afterEvent、resize、destroy。
  • afterDatasetsUpdate、afterUpdate、beforeDatasetsUpdate 和 beforeUpdate 现在接收 args 对象作为第二个参数。options 参数始终是最后一个，因此已从第二个位置移动到第三个位置。
  • afterEvent 和 beforeEvent 现在接收一个包装的 event 作为第二个参数的 event 属性。原始事件可以通过 args.event.native 获取。
  • 初始 resize 不再是静默的。这意味着 resize 事件可以在 beforeInit 和 afterInit 之间触发。
  • 新的钩子：install、start、stop 和 uninstall
  • afterEvent 应通过将 args.changed 设置为 true 来通知需要渲染的更改。因为 args 与所有插件共享，所以它应该只设置为 true，而不是 false。
上次更新时间: 2024/5/17 下午 12:33:38

←