TypeError: Chartist.plugins.legend is not a function

问题

I'm have recently started use Meteor build tool with Chartist to represent my data.

I have java script for legend template (source from internet)

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>

And a corresponding import statement as

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

I have used similar import statements which are working as expected.

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

There is a similar error for tooltip plugin import too as "TypeError: Chartist.plugins.tooltips is not a function".

Corresponding NPM statements I have used.

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

Can anyone help me in fixing this issue?

回答1:

duplicate post of mine from stackoverflow issue 40834462

I am not using meteor so your mileage may vary but I am using Angular2 and was getting similar errors. The answer for me was to use the legend plugin to get it initialized first and then use it in the Chartist plugin definition like you have done. This feels hacky but its working...

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

});

来源：https://stackoverflow.com/questions/40484994/typeerror-chartist-plugins-legend-is-not-a-function

标签

javascript

meteor

meteor-blaze

chartist.js