javascript - 在 float 条形图中同时显示悬停和旋转刻度 90 度

Question

我正在使用 flot 并渲染条形图。我的 x 轴上有非常大的标签，所以我使用 https://github.com/markrcote/flot-tickrotor 将它们旋转了 90 度。 . 但在我的图表中，我还使用工具提示向用户显示悬停时的数据。当我同时使用它们时，我收到了流动错误:

"Uncaught TypeError: Cannot read property 'label' of undefined".

我的代码:

<script>
 var dataset = [{ data: data, color: "#5482FF" }];


        var options = {
            series: {
                bars: {
                    show: true
                }
            },
            bars: {
                align: "center",
                barWidth: 0.5
            },
            xaxis: {
                axisLabel: "EquipmentMainCatagory",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10,
                ticks: ticks,
           rotateTicks:90
            },
            yaxis: {
                axisLabel: "# Assets",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 3,

            },

            grid: {
                hoverable: true,
                borderWidth: 0,
                backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
            }
        };

        $(document).ready(function () {
            $.plot($("#placeholder"), dataset, options);
            $("#placeholder").UseTooltip();
        });

    var previousPoint = null, previousLabel = null;

            $.fn.UseTooltip = function () {
                $(this).bind("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,
                            item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong>");
                        }
                    } else {
                        $("#tooltip").remove();
                        previousPoint = 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);
            }
</script>

Answer 1

看起来 jquery.flot.tickrotor.js 插件清除了 .ticks 数组属性并创建了它自己的 .rotatedTicks 数组属性.

所以切换到:

item.series.xaxis.rotatedTicks[x].label

一切都会好起来的。

fiddle 示例 here .