Highcharts 工具提示不显示相应的文本值,而是显示 'undefined'
Highcharts tooltip not displaying corrosponding text value, instead displaying 'undefined'
我有一个文本值列表及其相应的分值(值 X 和值 y)。我能够在值 x 和值 y 的交点处绘制一个点。将鼠标悬停在点上会显示点在 x,y 坐标上的位置值,但对于相应的文本值,它显示未识别。
<script>
var array = @Html.Raw(Json.Encode(ViewBag.Items3DList));
var practicalityscore = [];
for(var i in array){
var serie = new Array(array[i].YAxis, array[i].AvgIPA, array[i].Title);
practicalityscore.push(serie);
}
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'practicalityscore',
zoomType: 'xy',
defaultSeriesType:'scatter',
borderWidth:1,
borderColor:'#fff',
marginLeft:50,
marginRight:50,
backgroundColor:'#fff',
plotBackgroundColor:'#fff',
},
credits:{enabled:false},
title:{
text:'Most Practical Ideas',
align: 'left',
},
legend:{
enabled:false
},
tooltip:{
crosshairs: [{
enabled:true,
width:1,
color:'rgba(238,46,47,.25)'
},{
enabled:true,
width:1,
color:'rgba(238,46,47,.25)'
}],
formatter: function(){
return '<span><b>Practicality</b>: '+ Highcharts.numberFormat(this.x,0) + '<br/><span><b>Avg IPA</b>: '+ Highcharts.numberFormat(this.y,0) + '<br/><span><b>Idea</b>: '+ this.point.name;
}
},
plotOptions: {
series: {
color:'#0093dd',
marker: {
fillOpacity:1,
radius:7,
lineWidth:.5,
lineColor:'#fff',
},
}
},
xAxis:{
title:{
text:'Practicality Score'
},
min:0,
max:10,
tickInterval:1,
tickLength:0,
minorTickLength:0,
gridLineWidth:0,
showLastLabel:true,
showFirstLabel:false,
lineColor:'#fff',
lineWidth:0
},
yAxis:{
title:{
text:'AvgIPA',
rotation:-90,
margin:10,
},
min:0,
max:10,
tickInterval:1,
tickLength:0,
minorTickLength:0,
lineColor:'#fff',
lineWidth:0
},
series: [{
color:'rgba(238,46,47,.5)',
data: practicalityscore,
}]
}, function(chart) { // on complete
var width = chart.plotBox.width / 2.0;
var height = chart.plotBox.height / 2.0 + 1;
chart.renderer.rect(chart.plotBox.x,
chart.plotBox.y, width, height, 1)
.attr({
fill: '#fff',
'stroke-width': 4,
stroke: '#fff',
zIndex: 1
})
.add();
chart.renderer.rect(chart.plotBox.x + width,
chart.plotBox.y, width, height, 1)
.attr({
fill: '#fff',
'stroke-width': 4,
stroke: '#fff',
zIndex: 1
})
.add();
chart.renderer.rect(chart.plotBox.x,
chart.plotBox.y + height, width, height, 1)
.attr({
fill: '#fff',
'stroke-width': 4,
stroke: '#fff',
zIndex: 1
})
.add();
chart.renderer.rect(chart.plotBox.x + width,
chart.plotBox.y + height, width, height, 1)
.attr({
fill: '#fff',
'stroke-width': 4,
stroke: '#fff',
zIndex: 1
})
.add();
});
});
</script>
这是我从服务器端代码收到的数组对象的 json 表示。
array[1]
object{
AvgIPA:7, IdeaId:17989, Likes:3, Status:2, StatusString:"Published", Title:"Spread the word", UserFullName:"Anurag Acharya", XAxis:9, YAxis:5, ZAxis:7}
现在我只从 practicalityscore 数组向我的系列发送相关数据。这是该数据的表示形式。
practicalityscore [1]
[5, 7, "Spread the word"]
这是浏览器如何在图表上显示数据的屏幕截图
应该显示 "Spread the word" 而不是未定义。
您可以尝试如下修改格式化程序,将 this.point.name 更改为 this.point.series.name
function(){
return '<span><b>Practicality</b>: '+
Highcharts.numberFormat(this.x,0) +
'<br/><span><b>Avg IPA</b>: '+
Highcharts.numberFormat(this.y,0) +
'<br/><span><b>Idea</b>: '+ this.point.series.name;
}
不确定我是否理解正确objective,希望对您有所帮助
我尝试根据我的理解创建一个类似的 jsfiddle 示例
您需要将点数组替换为对象。它应该是 {x: 5, y:7, name: "Spread the word"}。然后在格式化程序中参考 this.point.options.name
我有一个文本值列表及其相应的分值(值 X 和值 y)。我能够在值 x 和值 y 的交点处绘制一个点。将鼠标悬停在点上会显示点在 x,y 坐标上的位置值,但对于相应的文本值,它显示未识别。
<script>
var array = @Html.Raw(Json.Encode(ViewBag.Items3DList));
var practicalityscore = [];
for(var i in array){
var serie = new Array(array[i].YAxis, array[i].AvgIPA, array[i].Title);
practicalityscore.push(serie);
}
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'practicalityscore',
zoomType: 'xy',
defaultSeriesType:'scatter',
borderWidth:1,
borderColor:'#fff',
marginLeft:50,
marginRight:50,
backgroundColor:'#fff',
plotBackgroundColor:'#fff',
},
credits:{enabled:false},
title:{
text:'Most Practical Ideas',
align: 'left',
},
legend:{
enabled:false
},
tooltip:{
crosshairs: [{
enabled:true,
width:1,
color:'rgba(238,46,47,.25)'
},{
enabled:true,
width:1,
color:'rgba(238,46,47,.25)'
}],
formatter: function(){
return '<span><b>Practicality</b>: '+ Highcharts.numberFormat(this.x,0) + '<br/><span><b>Avg IPA</b>: '+ Highcharts.numberFormat(this.y,0) + '<br/><span><b>Idea</b>: '+ this.point.name;
}
},
plotOptions: {
series: {
color:'#0093dd',
marker: {
fillOpacity:1,
radius:7,
lineWidth:.5,
lineColor:'#fff',
},
}
},
xAxis:{
title:{
text:'Practicality Score'
},
min:0,
max:10,
tickInterval:1,
tickLength:0,
minorTickLength:0,
gridLineWidth:0,
showLastLabel:true,
showFirstLabel:false,
lineColor:'#fff',
lineWidth:0
},
yAxis:{
title:{
text:'AvgIPA',
rotation:-90,
margin:10,
},
min:0,
max:10,
tickInterval:1,
tickLength:0,
minorTickLength:0,
lineColor:'#fff',
lineWidth:0
},
series: [{
color:'rgba(238,46,47,.5)',
data: practicalityscore,
}]
}, function(chart) { // on complete
var width = chart.plotBox.width / 2.0;
var height = chart.plotBox.height / 2.0 + 1;
chart.renderer.rect(chart.plotBox.x,
chart.plotBox.y, width, height, 1)
.attr({
fill: '#fff',
'stroke-width': 4,
stroke: '#fff',
zIndex: 1
})
.add();
chart.renderer.rect(chart.plotBox.x + width,
chart.plotBox.y, width, height, 1)
.attr({
fill: '#fff',
'stroke-width': 4,
stroke: '#fff',
zIndex: 1
})
.add();
chart.renderer.rect(chart.plotBox.x,
chart.plotBox.y + height, width, height, 1)
.attr({
fill: '#fff',
'stroke-width': 4,
stroke: '#fff',
zIndex: 1
})
.add();
chart.renderer.rect(chart.plotBox.x + width,
chart.plotBox.y + height, width, height, 1)
.attr({
fill: '#fff',
'stroke-width': 4,
stroke: '#fff',
zIndex: 1
})
.add();
});
});
</script>
这是我从服务器端代码收到的数组对象的 json 表示。
array[1]
object{
AvgIPA:7, IdeaId:17989, Likes:3, Status:2, StatusString:"Published", Title:"Spread the word", UserFullName:"Anurag Acharya", XAxis:9, YAxis:5, ZAxis:7}
现在我只从 practicalityscore 数组向我的系列发送相关数据。这是该数据的表示形式。
practicalityscore [1]
[5, 7, "Spread the word"]
这是浏览器如何在图表上显示数据的屏幕截图
应该显示 "Spread the word" 而不是未定义。
您可以尝试如下修改格式化程序,将 this.point.name 更改为 this.point.series.name
function(){
return '<span><b>Practicality</b>: '+
Highcharts.numberFormat(this.x,0) +
'<br/><span><b>Avg IPA</b>: '+
Highcharts.numberFormat(this.y,0) +
'<br/><span><b>Idea</b>: '+ this.point.series.name;
}
不确定我是否理解正确objective,希望对您有所帮助
我尝试根据我的理解创建一个类似的 jsfiddle 示例
您需要将点数组替换为对象。它应该是 {x: 5, y:7, name: "Spread the word"}。然后在格式化程序中参考 this.point.options.name