类型错误:Chartist.plugins.legend 不是函数 [英] TypeError: Chartist.plugins.legend is not a function
问题描述
我最近开始使用 Meteor 构建工具和 Chartist 来表示我的数据.
我有图例模板的java脚本(来自互联网)
Template.js
function drawBarChart() {new Chartist.Bar('.legendChart1', {标签:['今年第一季度'，'今年第二季度'，'今年第三季度'，'今年第四季度']，系列: [{ "name": "Money A", "data": [60000, 40000, 80000, 70000] },{ "name": "Money B", "data": [40000, 30000, 70000, 65000] }]}, {插件: [Chartist.plugins.legend()]});};Template.legendTemplate.rendered = function(){drawBarChart();}HTML
<div class="legendChart1">和相应的导入语句
import {legend} from 'chartist-plugin-legend';我使用了类似的 import 语句，它们按预期工作.
从'chartist-plugin-threshold'导入{ctThreshold}；从'chartist-plugin-barlabels'导入{ctBarLabels}；从'chartist-plugin-pointlabels'导入{ctPointLabels}；工具提示插件导入也有类似的错误 "TypeError: Chartist.plugins.tooltips is not a function".
我使用过的相应 NPM 语句.
meteor npm install --save chartist流星 npm install --save chartist-plugin-barlabels流星 npm install --save chartist-plugin-threshold流星 npm install --save chartist-plugin-pointlabels流星 npm install --save chartist-plugin-tooltips谁能帮我解决这个问题?
我的重复帖子来自 stackoverflow 问题 40834462
我没有使用meteor，所以你的里程可能会有所不同，但我使用的是Angular2并且遇到了类似的错误.我的答案是首先使用图例插件对其进行初始化，然后像您所做的那样在 Chartist 插件定义中使用它.这感觉很糟糕，但它的工作...
import * as Chartist from 'chartist';从 'chartist-plugin-legend' 导入 * 作为 MyLegend；构造函数(){var tester = new MyLegend();//没有这一行，你会得到'Chartist.plugins undefined'}.... 在另一种方法中，例如 ngOnInit 或其他方法...new Chartist.Bar('.ct-chart', {标签:['Jan'、'Feb'、'Mar'、'Apr'、'May'、'Jun'、'Jul'、'Aug'、'Sep'、'Oct'、'Nov'、'Dec'],系列: [[1,2,3,4],[1,2,3,4],[1,2,3,4]]}, {插件:[ Chartist.plugins.legend({LegendNames: ['蓝色药丸', '红色药丸', '紫色药丸']})]});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?
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']
}) ]
});
这篇关于类型错误:Chartist.plugins.legend 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
