新圖表

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']
    }
}