Highcharts简单柱状图:数据未显示
我试图从元素中的数据属性中提取值,并将它们放入悬停状态下的一个小柱状图中。悬停时图表会正确弹出,标题和轴也会呈现,但图表为空 我猜我如何将数据加载到Highcharts系列选项中有问题 以下是我的JS代码:Highcharts简单柱状图:数据未显示,highcharts,Highcharts,我试图从元素中的数据属性中提取值,并将它们放入悬停状态下的一个小柱状图中。悬停时图表会正确弹出,标题和轴也会呈现,但图表为空 我猜我如何将数据加载到Highcharts系列选项中有问题 以下是我的JS代码: $("#campaigns tbody tr:not(.group)").hover( function() { var name = $(this).attr("data-name"); var type = $(this).attr("data
$("#campaigns tbody tr:not(.group)").hover(
function() {
var name = $(this).attr("data-name");
var type = $(this).attr("data-type");
var sends = $(this).attr("data-sends");
var conversions = $(this).attr("data-conversions");
var opens = $(this).attr("data-opens");
var bounces = $(this).attr("data-bounces");
$('body').append('<div id="hoverchart"></div>');
$('#hoverchart').highcharts({
chart: {
type: 'column',
width: 300,
height: 200
},
title: {
text: name
},
subtitle: {
text: type
},
xAxis: {
categories: [
'Sends',
'Conversions',
'Opens',
'Bounces'
],
title: {
enabled: false
}
},
yAxis: {
min: 0,
title: {
enabled: false
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
showInLegend: false,
data: [sends, conversions, opens, bounces]
}],
credits: {
enabled: false
}
});
$(document).on('mousemove', function(e){
$('#hoverchart').css({
left: e.pageX+10,
top: e.pageY-10
});
});
}, function() {
$('#hoverchart').remove();
}
);
有什么想法吗
谢谢我可以通过更改以下内容来解决此问题:
var sends = $(this).attr("data-sends");
var conversions = $(this).attr("data-conversions");
var opens = $(this).attr("data-opens");
var bounces = $(this).attr("data-bounces");
致:
var sends = parseInt($(this).attr("data-sends"), 10);
var conversions = parseInt($(this).attr("data-conversions"), 10);
var opens = parseInt($(this).attr("data-opens"), 10);
var bounces = parseInt($(this).attr("data-bounces"), 10);