新しいチャート

Chart.js 2.0 では、各データセットのコントローラーという概念が導入されました。スケールと同様に、必要に応じて新しいコントローラーを作成できます。

class MyType extends Chart.DatasetController {
}
Chart.register(MyType);
// Now we can create a new instance of our chart, using the Chart.js API
new Chart(ctx, {
    // this is the string the constructor was registered at, ie Chart.controllers.MyType
    type: 'MyType',
    data: data,
    options: options
});

データセットコントローラーインターフェース

データセットコントローラーは、以下のインターフェースを実装する必要があります。

{
    // Defaults for charts of this type
    defaults: {
        // If set to `false` or `null`, no dataset level element is created.
        // If set to a string, this is the type of element to create for the dataset.
        // For example, a line create needs to create a line element so this is the string 'line'
        datasetElementType: string | null | false,
        // If set to `false` or `null`, no elements are created for each data value.
        // If set to a string, this is the type of element to create for each data value.
        // For example, a line create needs to create a point element so this is the string 'point'
        dataElementType: string | null | false,
    }
    // ID of the controller
    id: string;
    // Update the elements in response to new data
    // @param mode : update mode, core calls this method using any of `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'` or `undefined`
    update: function(mode) {}
}

以下のメソッドは、派生したデータセットコントローラーによってオプションでオーバーライドできます。

{
    // Draw the representation of the dataset. The base implementation works in most cases, and an example of a derived version
    // can be found in the line controller
    draw: function() {},
    // Initializes the controller
    initialize: function() {},
    // Ensures that the dataset represented by this controller is linked to a scale. Overridden to helpers.noop in the polar area and doughnut controllers as these
    // chart types using a single scale
    linkScales: function() {},
    // Parse the data into the controller meta data. The default implementation will work for cartesian parsing, but an example of an overridden
    // version can be found in the doughnut controller
    parse: function(start, count) {},
}

既存のチャートタイプの拡張

既存のコントローラータイプを拡張または置換するのは簡単です。組み込みタイプのいずれかのコンストラクターを独自のものに置き換えるだけです。

組み込みのコントローラータイプは次のとおりです。

• BarController
• BubbleController
• DoughnutController
• LineController
• PieController
• PolarAreaController
• RadarController
• ScatterController

これらのコントローラーは、UMDパッケージでも `Chart` 直下で直接利用できます。例：`Chart.BarController`。

たとえば、バブルチャートから拡張された新しいチャートタイプを派生させるには、次のようにします。

import {BubbleController} from 'chart.js';
class Custom extends BubbleController {
    draw() {
        // Call bubble controller method to draw all the points
        super.draw(arguments);
        // Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset
        const meta = this.getMeta();
        const pt0 = meta.data[0];
        const {x, y} = pt0.getProps(['x', 'y']);
        const {radius} = pt0.options;
        const ctx = this.chart.ctx;
        ctx.save();
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;
        ctx.strokeRect(x - radius, y - radius, 2 * radius, 2 * radius);
        ctx.restore();
    }
};
Custom.id = 'derivedBubble';
Custom.defaults = BubbleController.defaults;
// Stores the controller so that the chart initialization routine can look it up
Chart.register(Custom);
// Now we can create and use our new chart type
new Chart(ctx, {
    type: 'derivedBubble',
    data: data,
    options: options
});

TypeScript の型定義

新しいチャートタイプを静的に型付けしたい場合は、`.d.ts` TypeScript 宣言ファイルを提供する必要があります。Chart.js は、「宣言のマージ」の概念を使用して、組み込みの型をユーザー定義の型で拡張する方法を提供します。

新しいチャートタイプを追加する場合、`ChartTypeRegistry` には、`ChartTypeRegistry` の既存のエントリを拡張するか、新しいエントリを作成することにより、新しいタイプの宣言が含まれている必要があります。

たとえば、バブルチャートから拡張された新しいチャートタイプの型定義を提供するには、次の内容を含む `.d.ts` を追加します。

import { ChartTypeRegistry } from 'chart.js';
declare module 'chart.js' {
    interface ChartTypeRegistry {
        derivedBubble: ChartTypeRegistry['bubble']
    }
}