2

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

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

模板.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

谁能帮我解决这个问题？

4

1 回答 1

5

我的来自stackoverflow 问题 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']
    }) ]

});
于 2017-07-11T23:28:50.533 回答