Chart.js 中文网

# 新图表

¥New Charts

Chart.js 2.0 为每个数据集引入了控制器的概念。就像天平一样，可以根据需要编写新的控制器。

¥Chart.js 2.0 introduced the concept of controllers for each dataset. Like scales, new controllers can be written as needed.

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
});

  
        Copied!

# 数据集控制器接口

¥Dataset Controller Interface

数据集控制器必须实现以下接口。

¥Dataset controllers must implement the following interface.

{
    // 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) {}
}

  
        Copied!

以下方法可以选择被派生数据集控制器覆盖。

¥The following methods may optionally be overridden by derived dataset controllers.

{
    // 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) {},
}

  
        Copied!

# 扩展现有图表类型

¥Extending Existing Chart Types

扩展或替换现有的控制器类型很容易。只需将其中一种内置类型的构造函数替换为你自己的构造函数即可。

¥Extending or replacing an existing controller type is easy. Simply replace the constructor for one of the built-in types with your own.

内置控制器类型有：

¥The built-in controller types are:

  • BarController

  • BubbleController

  • DoughnutController

  • LineController

  • PieController

  • PolarAreaController

  • RadarController

  • ScatterController

这些控制器也在 UMD 包中提供，直接在 Chart 下。例如：Chart.BarController。

¥These controllers are also available in the UMD package, directly under Chart. Eg: Chart.BarController.

例如，要派生从气泡图扩展的新图表类型，你可以执行以下操作。

¥For example, to derive a new chart type that extends from a bubble chart, you would do the following.

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
});

  
        Copied!

# TypeScript 类型

¥TypeScript Typings

如果你希望新图表类型为静态类型，则必须提供 .d.ts TypeScript 声明文件。Chart.js 通过使用 "声明合并" 的概念提供了一种使用用户定义的类型来扩充内置类型的方法。

¥If you want your new chart type to be statically typed, you must provide a .d.ts TypeScript declaration file. Chart.js provides a way to augment built-in types with user-defined ones, by using the concept of "declaration merging".

添加新图表类型时，ChartTypeRegistry 必须包含新类型的声明，方法是扩展 ChartTypeRegistry 中的现有条目或创建新条目。

¥When adding a new chart type, ChartTypeRegistry must contain the declarations for the new type, either by extending an existing entry in ChartTypeRegistry or by creating a new one.

例如，要为从气泡图扩展的新图表类型提供类型，你可以添加一个 .d.ts，其中包含：

¥For example, to provide typings for a new chart type that extends from a bubble chart, you would add a .d.ts containing:

import { ChartTypeRegistry } from 'chart.js';

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

  
        Copied!