Question

我目前正在使用meteor创建一个仪表图表，我复制了JSFiddle的演示代码，这是我的代码：

<template name="Charts">

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"</script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>


<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>

<script>
    $(function () {
        $('#container').highcharts({

                    chart: {
                        type: 'gauge',
                        plotBorderWidth: 1,
                        plotBackgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#FFF4C6'],
                                [0.3, '#FFFFFF'],
                                [1, '#FFF4C6']
                            ]
                        },
                        plotBackgroundImage: null,
                        height: 200
                    },

                    title: {
                        text: 'VU meter'
                    },

                    pane: [{
                        startAngle: -45,
                        endAngle: 45,
                        background: null,
                        center: ['25%', '145%'],
                        size: 300
                    }, {
                        startAngle: -45,
                        endAngle: 45,
                        background: null,
                        center: ['75%', '145%'],
                        size: 300
                    }],

                    tooltip: {
                        enabled: false
                    },

                    yAxis: [{
                        min: -20,
                        max: 6,
                        minorTickPosition: 'outside',
                        tickPosition: 'outside',
                        labels: {
                            rotation: 'auto',
                            distance: 20
                        },
                        plotBands: [{
                            from: 0,
                            to: 6,
                            color: '#C02316',
                            innerRadius: '100%',
                            outerRadius: '105%'
                        }],
                        pane: 0,
                        title: {
                            text: 'VU<br/><span style="font-size:8px">Channel A</span>',
                            y: -40
                        }
                    }, {
                        min: -20,
                        max: 6,
                        minorTickPosition: 'outside',
                        tickPosition: 'outside',
                        labels: {
                            rotation: 'auto',
                            distance: 20
                        },
                        plotBands: [{
                            from: 0,
                            to: 6,
                            color: '#C02316',
                            innerRadius: '100%',
                            outerRadius: '105%'
                        }],
                        pane: 1,
                        title: {
                            text: 'VU<br/><span style="font-size:8px">Channel B</span>',
                            y: -40
                        }
                    }],

                    plotOptions: {
                        gauge: {
                            dataLabels: {
                                enabled: false
                            },
                            dial: {
                                radius: '100%'
                            }
                        }
                    },


                    series: [{
                        name: 'Channel A',
                        data: [-20],
                        yAxis: 0
                    }, {
                        name: 'Channel B',
                        data: [-20],
                        yAxis: 1
                    }]

                },

                // Let the music play
                function (chart) {
                    setInterval(function () {
                        if (chart.series) { // the chart may be destroyed
                            var left = chart.series[0].points[0],
                                    right = chart.series[1].points[0],
                                    leftVal,
                                    rightVal,
                                    inc = (Math.random() - 0.5) * 3;

                            leftVal = left.y + inc;
                            rightVal = leftVal + inc / 3;
                            if (leftVal < -20 || leftVal > 6) {
                                leftVal = left.y - inc;
                            }
                            if (rightVal < -20 || rightVal > 6) {
                                rightVal = leftVal;
                            }

                            left.update(leftVal, false);
                            right.update(rightVal, false);
                            chart.redraw();
                        }
                    }, 500);

                });
    });
</script>

</template>

但是，它显示 错误：Highcharts错误＃17：www.highcharts.com/errors/17：当您设置chart.type或series时发生此错误.type到在Highcharts中未定义的系列类型。一个典型的原因可能是你缺少定义系列类型的扩展文件，例如为了运行你需要加载highcharts-more.js文件的区域范围系列。

我很确定这些文件（包括jQuery）已正确加载到网页上。

我错过了什么吗？

Answer 1

根据我的研究，<template>标签是您的问题。你提到你有“动态图表”的问题。我在<template>标记上找到的此页面显示以下内容（在“声明模板内容”部分中）：

HTML元素表示标记中的模板。它包含“模板内容”;基本上惰性块的可克隆 DOM。将模板视为可以使用的脚手架（和在您的应用的整个生命周期中重复使用。

http://www.html5rocks.com/en/tutorials/webcomponents/template/

对我来说，这些<template>标签之间的任何内容都只需要是静态HTML，而不能是动态内容，例如脚本或您尝试使用的仪表图表。

将所有脚本移到<template>标记之外，看看是否能解决问题。

无法使用HighCharts创建仪表图表

1 个答案: