如何在 Chartist.js 中使用插件？

Question

我正在使用 Chartist.js 制作饼图组件。我想使用图例插件https://codeyellowbv.github.io/chartist-plugin-legend/

我的饼图中没有得到图例。请参阅下面的屏幕截图

代码：

import React, { Component } from 'react';
import ChartistGraph from "react-chartist";
import Legend from "chartist-plugin-legend";

import './piechart.css';

let options = {
  width:400,
  height:500,
  labelInterpolationFnc: function(value) {
    return value[0]
  }
};


let plugin = {
    plugin:'legend'
}


class Chart extends Component {

  render(){
    return(
      <div>
          <div className="center">
          <ChartistGraph data={data} options={options} plugins={plugin} type="Pie"/>
          </div>
      </div>

    )}

}

export default Chart;

截屏：

Answer 1

您可以通过将其添加到属性上来使用该插件options，但首先您需要导入 ff. 依赖项：

import React, { Component } from 'react';
import ChartistGraph from "react-chartist";
import Legend from "chartist-plugin-legend";

添加插件：

let options = {
    width:400,
    height:500,
    plugins: [
        Legend()
    ]
};

渲染它：<ChartistGraph data={data} options={options} type={type} />

由于不包含 CSS，因此您可以在此处检查插件的索引文件并使用它。