TypeError：Chartist.plugins.legend不是函数

Question

我最近开始使用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 {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

有人可以帮我解决这个问题吗？

Answer 1

我的帖子来自stackoverflow issue 40834462

我没有使用流星，所以你的里程可能会有所不同，但我使用的是Angular2并且遇到了类似的错误。我的答案是使用legend插件首先初始化它，然后像你所做的那样在Chartist插件定义中使用它。这感觉很酷，但它的工作......

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

});