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

一切都应该好。

小提琴示例here。

Answer 2

在bind("plothover"...)功能中，您可以使用

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

但您的ticks数组由数组组成，而不是具有label属性的对象您可以尝试使用

替换上面的行

item.series.xaxis.ticks[x][1] + " : <strong>" + y + "</strong>");

在悬停时显示并在flot条形图中同时旋转90度

2 个答案: