0
настоящее время я использую метеора, чтобы создать калибровочные графики, я скопировал демонстрационный код из JSFiddle, и вот мой код:Невозможно создать калибровочные графики с использованием 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>
Однако, это показывает Ошибка: ошибка Highcharts # 17: www.highcharts.com/errors/17: Эта ошибка возникает, когда вы задаете тип chart.type или series.type для типа серии, который не определен в Highcharts. Типичная причина может заключаться в том, что у вас отсутствует файл расширения, в котором определен тип серии, например, для запуска серии Arearange вам необходимо загрузить файл highcharts-more.js.
И я уверен, что эти файлы (включая jQuery) правильно загружены на веб-страницу.
Есть ли что-нибудь, что я пропустил?
Что произойдет, если вы измените 'http' на' https' для скрипта 'solid-gauge.js'? Интересно, не проходит ли это из-за конфигурации безопасности/прокси-сервера вашего сайта. –
@brightmatrix Ничего не получилось :(Спасибо в любом случае. –
Хорошо, это, по крайней мере, это правильно. Я скопировал весь ваш код в скрипку и работает точно так, как ожидалось. Вы пытаетесь создать другой * вид * калибра , например, этот: http://www.highcharts.com/demo/gauge-speedometer? –