我已经让 Highcharts 使用 Blaze 模板很长时间了。我正在转向进口,现在我遇到了麻烦。
图表文件模块:/app-name/imports/ui/pages/helpers/charts.js
// 注意:我在使用 Highcarts 流星包之前添加了这些导入:
import 'highcharts-more';
import 'highcharts-solid-gauge';
import Highcharts from 'highcharts';
import { Template } from 'meteor/templating';
let testGuage = percentage => {
$('#test-container-gauge').highcharts({
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '125%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Speed'
},
stops: [
[0.1, '#3b74bf'],
[0.5, '#0ddfd3'],
[0.9, '#53df82']
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: percentage,
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:#7e7e7e">{y}%</span><br/>' +
'<span style="font-size:12px;color:silver">Test</span></div>'
}
}]
});
}
我在模板中导入模块,请注意此模板上没有订阅,我正在调用 onRendered 函数中的方法:
import { Template } from "meteor/templating";
import { ReactiveDict } from "meteor/reactive-dict";
import { FlowRouter } from 'meteor/kadira:flow-router';
import "./reports.html";
import { testGuage} from '../helpers/charts.js';
Template.Reports.onRendered(function () {
this.autorun(function() {
var percentComplete = 0;
percentComplete = getAccountField('PercentComplete') || 0;
var gaugeInput = parseInt(percentComplete) || 0;
var gauge = $('#test-container-gauge');
if (gauge) testGuage([gaugeInput]);
});
});
我 npm 的 Highcharts 依赖项:
"highcharts": "^5.0.12",
"highcharts-more": "^0.1.2",
"highcharts-solid-gauge": "^0.1.2",
在切换到导入之前,我使用和工作的 Highcharts 流星包(我删除了这些包):
maazalik:highcharts, maazalik:highcharts-gauge
和错误: