Highcharts简单柱状图:数据未显示

Highcharts简单柱状图:数据未显示,highcharts,Highcharts,我试图从元素中的数据属性中提取值,并将它们放入悬停状态下的一个小柱状图中。悬停时图表会正确弹出,标题和轴也会呈现,但图表为空 我猜我如何将数据加载到Highcharts系列选项中有问题 以下是我的JS代码: $("#campaigns tbody tr:not(.group)").hover( function() { var name = $(this).attr("data-name"); var type = $(this).attr("data

我试图从元素中的数据属性中提取值,并将它们放入悬停状态下的一个小柱状图中。悬停时图表会正确弹出,标题和轴也会呈现,但图表为空

我猜我如何将数据加载到Highcharts系列选项中有问题

以下是我的JS代码:

$("#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);