Highcharts Solid Gauge 只想显示 1 个数据标签
Highcharts Solid Gauge only want to show 1 data label
我想在我的项目中使用 Highcharts,但在使用 Javascript 时遇到了一些问题,因为我对这门语言还很陌生。我已经自定义了我当前的图表,但数据标签相互重叠除外,因为数据数组中有超过 1 个元素。
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [160, 50],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
你可以从上方看到我的 data: [160, 50]
数组。我必须将数组元素从大到小放置,因为图表上的数据图是在前一个上绘制的;没关系,我正在处理。
我的问题是如何让数据标签只显示数据[0]?我尝试了很多方法都没有运气。通常我会在 jsfiddle 中看到一个空白屏幕,我认为这是无效的 JS。
这是显示我在 jsfiddle 中的问题的默认图表:
http://jsfiddle.net/wzx8r9qq/
我从您的代码中了解到,您有一个包含两个数据点(160 和 50)的系列。因此,对于显示,您可以同时启用或不启用。
对于您想实现的目标,我认为替代方法是使用 两个系列 而不是一个系列,并显示一个系列而不是其他系列的价值。注:这里有两个系列一个上一个。
这是更新后的代码,jsFiddle
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [160],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
},
{
name: 'Speed',
data: [50],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '"></span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}
]
}
我想在我的项目中使用 Highcharts,但在使用 Javascript 时遇到了一些问题,因为我对这门语言还很陌生。我已经自定义了我当前的图表,但数据标签相互重叠除外,因为数据数组中有超过 1 个元素。
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [160, 50],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
你可以从上方看到我的 data: [160, 50]
数组。我必须将数组元素从大到小放置,因为图表上的数据图是在前一个上绘制的;没关系,我正在处理。
我的问题是如何让数据标签只显示数据[0]?我尝试了很多方法都没有运气。通常我会在 jsfiddle 中看到一个空白屏幕,我认为这是无效的 JS。
这是显示我在 jsfiddle 中的问题的默认图表: http://jsfiddle.net/wzx8r9qq/
我从您的代码中了解到,您有一个包含两个数据点(160 和 50)的系列。因此,对于显示,您可以同时启用或不启用。
对于您想实现的目标,我认为替代方法是使用 两个系列 而不是一个系列,并显示一个系列而不是其他系列的价值。注:这里有两个系列一个上一个。
这是更新后的代码,jsFiddle
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [160],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
},
{
name: 'Speed',
data: [50],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '"></span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}
]
}