1

我已经让 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

和错误:

在此处输入图像描述

4

0 回答 0