javascript - TypeError:Chartist.plugins.legend不是函数

我最近开始使用Meteor构建工具和Chartist表示我的数据。

我有图例模板的Java脚本（来自互联网）

Template.js

function drawBarChart() {
     new Chartist.Bar('.legendChart1', {
         labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
         series: [
                { "name": "Money A", "data": [60000, 40000, 80000, 70000] },
                { "name": "Money B", "data": [40000, 30000, 70000, 65000] }
         ]
      }, {
           plugins: [
               Chartist.plugins.legend()
           ]
      });
};
Template.legendTemplate.rendered = function(){
  drawBarChart();
}

的HTML

<template name="legendTemplate">
<div class="legendChart1">
</div>
</template>

和相应的导入语句为

 import {legend} from 'chartist-plugin-legend';

我使用了类似的import语句，该语句可以按预期工作。

import {ctThreshold} from 'chartist-plugin-threshold';
import {ctBarLabels} from 'chartist-plugin-barlabels';
import {ctPointLabels} from 'chartist-plugin-pointlabels';

工具提示插件导入也有类似的错误，如"TypeError: Chartist.plugins.tooltips is not a function"。

我使用了相应的NPM语句。

meteor npm install --save chartist
meteor npm install --save chartist-plugin-barlabels
meteor npm install --save chartist-plugin-threshold
meteor npm install --save chartist-plugin-pointlabels
meteor npm install --save chartist-plugin-tooltips

谁能帮助我解决此问题？

最佳答案

来自stackoverflow issue 40834462的我的重复帖子

我没有使用流星，所以您的飞行里程可能会有所不同，但是我正在使用Angular2，并且遇到类似的错误。对我来说，答案是使用图例插件首先将其初始化，然后像您一样在Chartist插件定义中使用它。这感觉很hacky，但是可以正常工作...

import * as Chartist from 'chartist';
import * as MyLegend from 'chartist-plugin-legend';

constructor(){
  var tester = new MyLegend(); //without this line, you get 'Chartist.plugins undefined'
}

.... in another method like ngOnInit or something...
new Chartist.Bar('.ct-chart', {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [1,2,3,4],
    [1,2,3,4],
    [1,2,3,4]
  ]
}, {
  plugins: [ Chartist.plugins.legend({
        legendNames: ['Blue pill', 'Red pill', 'Purple pill']
    }) ]

});