Chart.js

#3.x 移行ガイド

Chart.js 3.0 では、多数の重大な変更が導入されています。 Chart.js 2.0 は 2016 年 4 月にリリースされました。それ以来数年間、Chart.js の人気と機能セットが成長するにつれて、私たちはグラフ作成ライブラリをより適切に作成する方法についていくつかの教訓を学びました。パフォーマンスを向上させ、新機能を提供し、保守性を向上させるには、下位互換性を解除する必要がありましたが、メリットに見合った場合にのみ、下位互換性を解除することを目指しました。 v3 の主なハイライトは次のとおりです。

  • 大きいパフォーマンスデータ解析をスキップし、ウェブワーカー経由で並行してグラフをレンダリングする機能などの改善
  • より優れたデフォルトを備えた追加の構成可能性とスクリプト可能なオプション
  • 完全に書き直されたアニメーションシステム
  • 多数のバグ修正を加えて書き直されたフィラー プラグイン
  • ドキュメントが GitBook から Vuepress に移行されました
  • TypeDoc によって生成および検証された API ドキュメント
  • CSS インジェクションはもう必要ありません
  • 大量のバグ修正
  • 木が揺れる

#エンドユーザーの移行

#セットアップとインストール

  • 配布ファイルは小文字になりました。例えば：dist/chart.js。
  • Chart.js は提供しなくなりました。Chart.bundle.jsとChart.bundle.min.js。をご覧ください。インストールと統合これらのビルドを使用している場合に Chart.js をセットアップする推奨方法の詳細については、ドキュメントを参照してください。
  • momentは npm 依存関係として指定されなくなりました。を使用している場合は、timeまたtimeseriesスケールには、次のいずれかを含める必要があります。利用可能なアダプター (新しいウィンドウが開きます)および対応する日付ライブラリ。ビルドからモーメントを除外する必要はなくなりました。
  • のChart提供されたキャンバス/コンテキストがすでに使用されている場合、コンストラクターはエラーをスローします
  • Chart.js 3 はツリーシェイク可能です。したがって、それをとして使用している場合は、npmプロジェクト内のモジュールを使用し、この機能を利用したい場合は、使用するコントローラー、エレメント、スケール、プラグインをインポートして登録する必要があります。インポートできるすべての項目のリストについては、「統合。電話する必要はありませんregisterChart.js を経由してインポートする場合scriptタグまたはからautoパスをとして登録しますnpmこの場合、ツリーシェイクの利点は得られません。コンポーネントを登録する例を次に示します。
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']交互になります'red'/'green'データポイントが 3 つ以上ある場合。
  • オブジェクト データの入力プロパティを自由に指定できるようになりました。を参照してください。データ構造詳細については。
  • ほとんどのオプションは、デフォルトとマージするのではなく、プロキシを利用して解決されます。さまざまなコンテキストに対してさまざまな解決ルートを簡単に有効にすることに加えて、スクリプト可能なオプションで他の解決されたオプションを使用できるようになります。
    • 何らかの理由で無効にされない限り、オプションはデフォルトでスクリプト化可能でインデックス化可能です。
    • スクリプト可能なオプションは、同じコンテキスト内の他のオプションにアクセスするための 2 番目のパラメーターとしてオプション リゾルバーを受け取ります。
    • 一致するものが以前に見つからなかった場合、解決は上位のスコープに落ちます。見るオプション詳細については。

#具体的な変更点

  • 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を支持してオプションが削除されましたaf3a5​​fbc-5179-4245-b774-da0e38473bf4(または他のスケール 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ドーナツ チャート、円グラフ、polarArea グラフ、およびレーダー チャートのデフォルトは 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要素の属性が削除されました。スクリプト可能なオプションを使用してください
  • のhoverスクリプト可能なオプションのプロパティcontextオブジェクトの名前が変更されました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インスタンスを第 3 引数として指定する
  • 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オプションが 1 つに統合されましたpadding物体

#開発者の移行

Chart.js 3 のエンドユーザーの移行は非常に簡単ですが、開発者の移行はより複雑になる可能性があります。 #dev でサポートを求めてください。スラック (新しいウィンドウが開きます)移行に関するヒントが役立つ場合は、チャンネルをご覧ください。

大きく変わった点は次のとおりです。

  • 完全に書き直され、よりパフォーマンスの高いアニメーション システムが追加されました。
    • Element._modelとElement._viewは使用されなくなり、プロパティは要素に直接設定されるようになりました。メソッドを使用する必要がありますgetPropsなどのほとんどのメソッド内でこれらのプロパティにアクセスするにはinXRange/inYRangeとgetCenterPoint。ぜひご覧くださいChart.js が提供する要素 (新しいウィンドウが開きます)たとえば。
    • コントローラーで要素を構築する場合、次の呼び出しが推奨されるようになりました。updateElement要素のプロパティを提供します。などの方法もありますgetSharedOptionsとincludeOptions冗長な計算をスキップするために追加されました。ぜひご覧くださいChart.js が提供するコントローラー (新しいウィンドウが開きます)たとえば。
  • Scales には新しい解析 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現在はドーナツ、パイ、およびpolarAreaコントローラ上に存在します
  • Chart.lastActive
  • Chart.Legendに移動されましたChart.plugins.legend._elementそして非公開にしました
  • Chart.Line。新しいチャートは次の方法で作成されます。new Chartそして適切なサービスを提供するtypeパラメータ
  • Chart.LinearScaleBase現在はインポートする必要があり、外部からはアクセスできません。Chart物体
  • Chart.offsetX
  • Chart.offsetY
  • Chart.outerRadius現在はドーナツ、パイ、およびpolarAreaコントローラ上に存在します
  • Chart.pluginsと置き換えられましたChart.registry。プラグインのデフォルトが追加されましたChart.defaults.plugins[id]。
  • Chart.plugins.registerに置き換えられましたChart.register。
  • Chart.PolarArea。新しいチャートは次の方法で作成されます。new Chartそして適切なサービスを提供するtypeパラメータ
  • Chart.prototype.generateLegend
  • Chart.platform。含まれていたのは513bd​​e48-1a83-4983-a179-cfc5cf8119a9。 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

#ヘルパーから削除されました

  • 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オプションは暗黙的に凡例を 3 番目の引数として受け取るようになりました。this
  • 伝説onClick、onHover、 とonLeaveオプションはラップされたものを受け取るようになりましたevent最初のパラメータとして。以前の最初のパラメータ値には、次の方法でアクセスできます。event.native。
  • Title.margins今はプライベートです
  • ツールチップ項目のxと9eb6c225-74dc-​​497e-a11c-0de6da16c233属性は次のように置き換えられました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と置き換えられますkidbf7f8-d7f2-4a4b-bd1f-c6c5e1fb919e

#プライベート 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必要なパラメータは 1 つだけになりました。のためにTimeScaleこのパラメータはエポックからのミリ秒である必要があります。パフォーマンスの最適化として、データ ポイントのインデックスを与えるオプションの 2 番目のパラメーターを取ることができます。
#ティック単位で変更
  • Scale.afterBuildTicks他のコールバックのようなパラメータはありません
  • Scale.buildTicksティックオブジェクトを返すことが期待されるようになりました
  • Scale.convertTicksToLabelsに名前が変更されましたgenerateTickLabels。入力として与えられたティックに label プロパティを設定することが期待されるようになりました。
  • Scale.ticks文字列の代わりにオブジェクトが含まれるようになりました
  • ときautoSkipオプションが有効になっている場合、Scale.ticksすべてのティックではなく、スキップされていないティックのみが含まれるようになりました。
  • ティックは常に単調増加順に生成されるようになりました。
#時間スケールでの変化
  • getValueForPixelエポックからのミリ秒を返すようになりました

#コントローラーの変更点

#コアコントローラー
  • 最初のパラメータはupdateHoverStyleは、を含むオブジェクトの配列になりました。element、datasetIndex、 とindex
  • サインとか、resize変わった、最初のsilentパラメータが削除されました。
#データセットコントローラー
  • updateElementと置き換えられましたupdateElementsここで更新する要素を取得し、start索引、count、 とmode
  • setHoverStyleとremoveHoverStyleここでさらにdatasetIndexとindex

#インタラクションの変化

  • インタラクション モードのメソッドは、element、datasetIndex、 とa1a3eadc-94b9-4149-997c-25aa2e230ベッド

#レイアウト変更

  • ILayoutItem.update戻り値がなくなりました

#ヘルパーの変更

すべてのヘルパーがフラットな階層で公開されるようになりました。Chart.helpers.canvas.clipArea->Chart.helpers.clipArea

#キャンバスヘルパー
  • 2 番目のパラメータは、drawPointは完全なオプション オブジェクトになったので、style、rotation、 とradius明示的に渡されなくなりました
  • helpers.getMaximumHeightに置き換えられましたhelpers.dom.getMaximumSize
  • helpers.getMaximumWidthに置き換えられましたhelpers.dom.getMaximumSize
  • helpers.clearに名前が変更されましたhelpers.clearCanvasそして今はかかりますcanvasそしてオプションでctxパラメータとして。
  • helpers.retinaScaleオプションの 3 番目のパラメータを受け入れますforceStyle、現在のキャンバス スタイルを強制的にオーバーライドします。forceRatioもう元には戻らないwindow.devicePixelRatio代わりに、デフォルトでは1。

#プラットフォームの変更

  • Chart.platformはチャートで使用されるプラットフォーム オブジェクトではなくなりました。すべてのチャート インスタンスに個別のプラットフォーム インスタンスが存在するようになりました。
  • Chart.platforms2 つの使用可能なプラットフォーム クラスを含むオブジェクトです。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オブジェクトを 2 番目の引数として指定します。optionsargument は常に最後なので、2 位から 3 位に移動しました。
  • afterEventとbeforeEvent今すぐラッピングされたものを受け取りますeventとしてevent2 番目の引数のプロパティ。ネイティブ イベントは以下から入手できます。args.event.native。
  • イニシャルresizeはもう黙っていません。という意味ですresizeイベントは次の間で発生する可能性がありますbeforeInitとafterInit
  • 新しいフック:install、start、stop、 とuninstall
  • afterEvent設定によってレンダリングが必要な変更について通知する必要がありますargs.changed本当のこと。なぜならargsすべてのプラグインと共有されるため、false ではなく true にのみ設定する必要があります。
最終更新： 2023 年 5 月 25 日、午後 1 時 12 分 28 秒

←