javascript - Flor BarChart 中的工具提示问题

Question

我正在使用 Flot API 在我的应用程序中以图形方式绘制数据。我能够绘制数据并且能够实现工具提示。但我在使用工具提示时遇到问题。它显示 x 轴上的标签值“未定义”。

$(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 中删除 .label 我会得到工具提示 作为预转换，未定义:100

Cannot read property 'label' of undefined

请在这方面帮助我

Answer 1

从您的 fiddle 示例中，我看到您需要 orderBar 插件。 example你在评论中发布的插件使用了我的版本 adapted to Mootools .

您想使用 jQuery 版本。 You can find it here .我建议您自己存储一个本地副本。

还有一些事情:

除了实际的插件，您还需要在数据中添加更多信息。所以在你的系列中添加订单信息也像:

    bars: {
        order: 1
    },

要显示工具提示并获得 ticks 对象的正确索引，我还会更改您的代码中的这一部分:

var x = item.datapoint[0];

到:

var x = item.dataIndex;

Fiddle