Chart.js

# 3.x 遷移指南

Chart.js 3.0 引入了一些重大變更。Chart.js 2.0 於 2016 年 4 月發布。自那時起，隨著 Chart.js 在普及度和功能集方面不斷增長，我們學到了一些關於如何更好地創建圖表庫的經驗。為了提高效能、提供新功能並改善可維護性，有必要打破向後相容性，但我們的目標是僅在值得收益時才這樣做。v3 的一些主要亮點包括

  • 大幅 效能 提升，包括跳過數據解析的能力，以及透過 Web Worker 並行渲染圖表
  • 額外的可配置性和可腳本化選項，以及更好的預設值
  • 完全重寫的動畫系統
  • 重寫的填充插件，包含許多錯誤修正
  • 文件從 GitBook 遷移到 Vuepress
  • API 文件由 TypeDoc 生成和驗證
  • 不再注入 CSS
  • 大量的錯誤修正
  • Tree shaking

# 終端使用者遷移

# 設定與安裝

  • 發布的檔案現在使用小寫。例如：dist/chart.js。
  • Chart.js 不再提供 Chart.bundle.js 和 Chart.bundle.min.js。如果您過去使用這些版本，請參閱安裝和整合文件，了解設定 Chart.js 的建議方式。
  • moment 不再指定為 npm 依賴項。如果您正在使用 time 或 timeseries 刻度，您必須包含一個可用的適配器 (在新視窗中開啟) 和相應的日期函式庫。您不再需要從建置中排除 moment。
  • 如果提供的畫布/上下文已在使用中，Chart 建構函式將會拋出錯誤
  • Chart.js 3 具有 tree-shakeable 功能。因此，如果您在專案中將其用作 npm 模組，並想要使用此功能，您需要匯入並註冊您想要使用的控制器、元素、刻度和插件，有關所有可匯入項目的清單，請參閱整合。如果您透過 script 標籤或從 auto 註冊路徑匯入 Chart.js 作為 npm 模組，則不必呼叫 register，在這種情況下，您將不會獲得 tree shaking 的優勢。以下是註冊元件的範例
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 建構函式的設定選項進行了許多變更。這些變更記錄如下。

# 通用變更

  • 可索引選項現在會循環。如果有超過 2 個資料點，backgroundColor: ['red', 'green'] 將會產生交替的 'red' / 'green'。
  • 現在可以自由指定物件資料的輸入屬性，詳情請參閱資料結構。
  • 大多數選項會使用 Proxy 解析，而不是與預設值合併。除了輕鬆為不同上下文啟用不同的解析路徑之外，它還允許在可腳本化選項中使用其他已解析的選項。
    • 預設情況下，選項是可腳本化和可索引的，除非由於某些原因而停用。
    • 可腳本化選項會接收一個選項解析器作為第二個參數，以便存取相同上下文中的其他選項。
    • 如果較早找不到符合的選項，則解析會回到較高的範圍。詳情請參閱選項。

# 具體變更

  • 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 (或任何其他具有 axis: 'r' 的刻度 ID)
  • 已移除 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

# 預設值

  • 已從 defaults 中移除 global 命名空間。因此，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，以使其與 datalabels 外掛程式一致。

# 互動

  • 為了允許 DRY 配置，新增了一個用於常見互動選項的根選項範圍。options.hover 和 options.plugins.tooltip 現在都繼承自 options.interaction。預設值定義在 defaults.interaction 層級，因此預設情況下，hover 和 tooltip 互動會共用相同的模式等。
  • 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 屬性的 context 物件
  • 與工具提示選項相關的工具提示模型的所有屬性都已移動到 options 屬性中。
  • 回呼不再接收 data 參數。工具提示項目參數包含圖表和資料集
  • 工具提示項目的 index 參數已重新命名為 dataIndex，而 value 已重新命名為 formattedValue
  • xPadding 和 yPadding 選項已合併為單一的 padding 物件

# 開發人員遷移

雖然 Chart.js 3 的最終使用者遷移相當簡單，但開發人員遷移可能會更加複雜。如果您需要有關遷移的提示，請在 #dev Discord (開啟新視窗) 通道中尋求協助。

以下是一些已變更的最大事項

  • 有一個完全重寫且效能更高的動畫系統。
    • 不再使用 Element._model 和 Element._view，並且屬性現在直接設定在元素上。您必須使用 getProps 方法才能在大多數方法（例如 inXRange/inYRange 和 getCenterPoint）內部存取這些屬性。請參考 Chart.js 提供的元素 (開啟新視窗) 以取得範例。
    • 在控制器中建立元素時，現在建議呼叫 updateElement 以提供元素屬性。還新增了一些方法，例如 getSharedOptions 和 includeOptions，以跳過多餘的計算。請參考 Chart.js 提供的控制器 (開啟新視窗) 以取得範例。
  • 刻度引入了新的剖析 API。此 API 會取得使用者資料並將其轉換為更標準的格式。例如，它允許使用者以 string 形式提供數值資料，並在必要時將其轉換為 number。先前，這是隨著圖表的呈現即時完成的。現在，它會預先完成，並且如果使用者以正確的格式提供資料，則可以跳過它以獲得更好的效能。如果您使用標準資料格式（例如 x/y），您可能不需要執行任何操作。如果您使用自訂資料格式，則必須覆寫 core.datasetController.js 中的某些剖析方法。您可以在 chartjs-chart-financial (開啟新視窗) 中找到範例，它使用 {o, h, l, c} 資料格式。

控制器進行了一些更直接的變更，但會影響所有控制器

  • 選項
    • global 已從預設命名空間中移除，因為它是不必要的，而且有時不一致
    • 資料集預設值現在位於圖表類型選項下，而不是反過來。在 2.x 中引入時，為了保持回溯相容性，無法執行此操作。修正它移除了新的圖表開發人員遇到的最大障礙
    • 刻度預設選項需要按照最終使用者遷移區段中的說明更新（例如，x 而不是 xAxes，以及 y 而不是 yAxes）
  • updateElement 已變更為 updateElements，並且具有如下所述的新方法簽名。這提供了效能增強，例如允許更輕鬆地重複使用所有元素共有的計算，並減少函式呼叫的次數

# 已移除

已移除下列屬性和方法

# 從圖表中移除

  • 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 現在位於 doughnut、pie 和 polarArea 控制器上
  • Chart.lastActive
  • Chart.Legend 已移動到 Chart.plugins.legend._element 並設為私有
  • Chart.Line。新的圖表是透過 new Chart 建立，並提供適當的 type 參數
  • Chart.LinearScaleBase 現在必須匯入，且無法從 Chart 物件存取
  • Chart.offsetX
  • Chart.offsetY
  • Chart.outerRadius 現在位於 doughnut、pie 和 polarArea 控制器上
  • Chart.plugins 已被 Chart.registry 取代。外掛程式預設值現在位於 Chart.defaults.plugins[id] 中。
  • Chart.plugins.register 已被 Chart.register 取代。
  • Chart.PolarArea。新的圖表是透過 new Chart 建立，並提供適當的 type 參數
  • Chart.prototype.generateLegend
  • Chart.platform。它只包含 disableCSSInjection。CSS 永遠不會在 v3 中注入。
  • 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

# 從 Helper 移除

  • 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，該參數必須是自 epoch 以來的毫秒數。作為效能優化，它可能會採用可選的第二個參數，給出資料點的索引。
# 刻度中的變更
  • Scale.afterBuildTicks 現在沒有像其他回呼一樣的參數
  • Scale.buildTicks 現在預期會傳回刻度物件
  • Scale.convertTicksToLabels 已重新命名為 generateTickLabels。現在預期會在作為輸入的刻度上設定 label 屬性
  • Scale.ticks 現在包含物件而不是字串
  • 當啟用 autoSkip 選項時，Scale.ticks 現在只包含未跳過的刻度，而不是所有刻度。
  • 刻度現在總是按照單調遞增的順序產生
# 時間刻度中的變更
  • getValueForPixel 現在會傳回自 epoch 以來的毫秒數

# 控制器中的變更

# 核心控制器
  • 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

←