自2016年以来，我使用Highcharts-4.2.5，但是在实现一些新功能时，我升级到Highcharts-7.1.2。此后，“固体量规”工具提示将不再显示值。仅出现黑框。 该代码为默认代码，但已更改为强制字段的格式和显示，但未成功。 如果我返回到以前的版本，它们将恢复正常运行。
<script language="javascript" type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/main.js"></script>
<script language="javascript" type="text/javascript" src="./code/highcharts.js"></script>
<script language="javascript" type="text/javascript" src="./code/highcharts-more.js"></script>
<script language="javascript" type="text/javascript" src="./code/modules/solid-gauge.js"></script>
<script language="javascript" type="text/javascript" src="./code/modules/exporting.js"></script>
<script language="javascript" type="text/javascript" src="./code/themes/dark-unica.js"></script>
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '60%'],
size: '70%',
startAngle: -135,
endAngle: 135,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '50%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enable: true,
shared: true,
outside: true,
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -35
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -10,
borderWidth: 0,
useHTML: true
}
}
},
navigation: {
buttonOptions: {
enabled: false
}
}
};
// The CPU temp gauge
$('#temp-cpu').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 60,
showFirstLabel: false,
showLastLabel: false,
title: {
text: 'CPU'
}
},
credits: {
enabled: false
},
series: [{
name: 'Temp.',
data: [{
radius: '100%',
innerRadius: '50%',
}],
dataLabels: {
format: '<div><span style="font-color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'°</div>'},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}</b>',
valueSuffix: ' ºC',
},
}]
}));
// The HDD Temp gauge
$('#temp-hdd').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 60,
showFirstLabel: false,
showLastLabel: false,
title: {
text: 'HDD'
}
},
credits: {
enabled: false
},
series: [{
name: 'Temp.',
data: [{
radius: '100%',
innerRadius: '50%',
}],
dataLabels: {
format: '<div><span style="font-color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'°</div>'},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}</b>',
valueSuffix: ' °C',
},
}]
}));
// The CPU load gauge
$('#load-cpu').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
showFirstLabel: false,
showLastLabel: false,
title: {
text: 'CPU'
}
},
credits: {
enabled: false
},
series: [{
name: 'Load',
data: [{
radius: '100%',
innerRadius: '50%',
}],
dataLabels: {
format: '<div><span style="font-color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'%</div>'},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}</b>',
valueSuffix: ' %',
},
}]
}));
setInterval(function () {
// CPU Temp
var chart = $('#temp-cpu').highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
newVal = parseFloat(document.getElementById("cpu_temp_box").value);
point.update(newVal);
chart.redraw();
}
//HDD Temp
chart = $('#temp-hdd').highcharts();
if (chart) {
point = chart.series[0].points[0];
newVal = parseFloat(document.getElementById("hdd_temp_box").value);
point.update(newVal);
chart.redraw();
}
//CPU Load
chart = $('#load-cpu').highcharts();
if (chart) {
point = chart.series[0].points[0];
newVal = parseFloat(document.getElementById("cpu_busy_box").value);
point.update(newVal);
chart.redraw();
}
答案 0 :(得分：1)
您的系列数据，当前设置如下：
data: [{
radius: '100%',
innerRadius: '50%',
}]
显示为work in version 4.2.5，但显示为not work in newer versions。
这可能是因为您没有提供Y值，所以我建议将其设置为：
data: [0]