Question

我正在尝试从data-元素中的<tr>属性中提取值，并在悬停时将它们放入一个小柱形图中。在悬停时图表会正确弹出，并且会渲染标题和轴，但图表为空。

我猜我将数据加载到Highcharts series选项的方式有些不正确？

这是我的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();
      }
    );

有什么想法吗？

由于

Answer 1

我能够通过改变来解决这个问题：

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);

Highcharts简单柱形图：数据未显示

1 个答案: