新图表

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