erstellen Ich bin mit Meteor derzeit eine Lehre zum Erstellen von Diagrammen, ich den Demo-Code aus JSFiddle kopiert haben, und hier ist mein Code:Kann nicht Gauge-Charts mit HighCharts
<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>
Aber es zeigt Fehler: Highcharts-Fehler # 17: www.highcharts.com/errors/17: Dieser Fehler tritt auf, wenn Sie chart.type oder series.type auf einen Serientyp festlegen, der nicht in Highcharts definiert ist. Ein typischer Grund kann sein, dass Ihnen die Erweiterungsdatei fehlt, in der der Serientyp definiert ist. Um beispielsweise eine Bereichsgruppe auszuführen, müssen Sie die Datei highcharts-more.js laden.
Und ich bin mir ziemlich sicher, dass diese Dateien (einschließlich jQuery) ordnungsgemäß auf der Webseite geladen sind.
Gibt es etwas, das ich vermisst habe?
Was passiert, wenn Sie für das Skript 'solid-gauge.js' das' http' in 'https' ändern? Ich frage mich, ob das wegen der Sicherheit/Proxy-Konfiguration Ihrer Website nicht durchkommt. –
@brightmatrix Nichts ist passiert :(Danke trotzdem. –
OK, es ist gut, das zumindest auszuschließen. Ich kopiere all deinen Code in eine Fiedel und es funktioniert genau wie erwartet. Versuchst du, eine andere * Art * von Spurweite zu erzeugen , wie diese: http://www.highcharts.com/demo/gauge-speedometer? –