Question

我正在使用Flot API在我的应用程序中以图形方式绘制数据。我能够绘制数据并且能够实现工具提示。但我的工具提示有问题。它沿x轴显示'undefined'标签值。

$(function () {
            var a1 = [
        [0, 100],
        [1, 200],
        [2,300],
        [3,400],
        [4,500]

    ];
    var a2 = [
        [0, 80],
        [1, 150],
        [2,250],
        [3,360],
    [4,450]
        ];


        var data = [
            {
                label: "Pre Transformation",
                data: a1
            },
            {
                label: "Post Transformation",
                data: a2
            }



        ];

      $.plot($("#placeholder2"), data, {

            series: {
                bars: {
                    show: true,
                    barWidth: 0.13,
                    order: 1
                }
            },
            xaxis: {
            ticks: [[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]],
            tickLength: 0
            },
                grid: {
          hoverable: true,
         clickable:true
  
         
          },

           valueLabels: {
                show: false
            }

       });

    });



 var previousPoint = null,
    previousLabel = null;

function showTooltip(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 40,
        left: x - 120,
        border: '2px solid ' + color,
        padding: '3px',
            'font-size': '9px',
            'border-radius': '5px',
            'background-color': '#fff',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        opacity: 0.9
    }).appendTo("body").fadeIn(200);
}


$("#placeholder2").on("plothover", function (event, pos, item) {
    if (item) {
        if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
            previousPoint = item.dataIndex;
            previousLabel = item.series.label;
            $("#tooltip").remove();

            var x = item.datapoint[0];
            var y = item.datapoint[1];

            var color = item.series.color;

          //console.log(item.series.xaxis.ticks[x].label);               

            showTooltip(item.pageX,
            item.pageY,
            color,
                "<strong>" + item.series.label+ "</strong><br>" + item.series.xaxis.ticks[x].label + ":  <strong>" + y + "</strong>");
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
});

我遇到了这条线的问题

"<strong>" + item.series.label+ "</strong><br>" + item.series.xaxis.ticks[x].label + ":  <strong>" + y + "</strong>"

如果我从此item.series.xaxis.ticks [x]删除.label。我正在获取工具提示作为Pre Transformation，未定义：100

Cannot read property 'label' of undefined

请在这方面帮助我

Answer 1

从你的小提琴例子中我看到你需要orderBar插件。您在评论中发布的example使用了我adapted to Mootools的插件版本。

您想使用jQuery版本。 You can find it here。我建议你自己存一份本地文件。

还有一些事情：

除了实际的插件，您还需要在数据中添加更多信息。因此，在您的系列中添加订单信息，例如：

    bars: {
        order: 1
    },

要显示工具提示并获取ticks对象的正确索引，我还会在您的代码中更改此部分：

var x = item.datapoint[0];

为：

var x = item.dataIndex;

Flor BarChart中的工具提示问题

1 个答案:

Fiddle