flot chart plothover事件触发，但条形图中的项始终为空

flot chart plothover event fires but item is always null in bar chart

本文关键字：条形图 plothover chart 事件 flot      更新时间：2023-09-26

我使用flot图表在shoppimon.com上显示随时间推移的问题发生数据。当使用折线图时，我的flothover函数工作得很好，但一旦切换到条形图，工具提示就会停止显示。调试时，我在flothover回调内部中断，这意味着事件正在激发，但"item"参数始终为null。

如有任何建议，不胜感激。

这是我的代码：

renderChart : function(containerId) {
    setTimeout(function(){
        var data = chartServer.getData(containerId);
        var container = $('#' + containerId);
        if (window.localStorage && window.localStorage['cbMode'] == 'true') {
            data.options.colors = chartClient.cbColors;
        } else {
            data.options.colors = chartClient.chartColors;
        }
        container.before('<div id="' + containerId + '-controls" class="chart-controls group"> '
            <div class="chart-legend" /> ');
        //Plot the chart
        var chart = $.plot(container, data.dataSet, data.options);
        container.bind('plothover', chartClient.hoverFunction);
        container.bind('plotclick', chartClient.clickFunction);
        container.bind('plothover', function(event, pos, item) {
            if (item) {
                $(event.target).css({cursor:"pointer"});
            } else {
                $(event.target).css({cursor:"auto"});
            }
        });
    }, 100);
},
hoverFunction : function(event, pos, item) {
    if (item) {
        if (chartClient.previousPoint != item.dataIndex) {
            chartClient.previousPoint = item.dataIndex;
            $("#chart-tooltip").remove();
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(0);
            var date = new Date(parseInt(x, 10));
            date.add({minutes: Date.today().getTimezoneOffset()}); // compensate for local TZ
            var contents = date.toString("MMM d ") + date.toString("t") + "<br />" + y + " times";
            $('<div id="chart-tooltip">' + contents + '</div>').css({
                top: item.pageY + 5,
                left: item.pageX + 5
            }).appendTo("body").fadeIn(200);
        }
    } else {
        $("#chart-tooltip").remove();
        chartClient.previousPoint = null;
    }
},

这是我的选项对象：

Object {xaxis: Object, grid: Object, legend: Object, series: Object, colors: Array[5]}
colors: Array[5]0: "#0073B5"1: "#6A4A3C"2: "#CC333F"3: "#EB6841"4: "#EDC951"
length: 5
grid: Object
borderColor: "#EDEDED"
borderWidth: 1
clickable: true
hoverable: true
legend: Object
container: "#occurrence-chart-39631-controls .chart-legend"
noColumns: 1
series: Object
bars: Object
fill: true
show: true
xaxis: Object
mode: "time"

因此，为了在flotHover事件处理程序中获取项目对象，您必须使用以下"点"选项将数据点包括在图表中：

    $options['grid']['clickable'] = true;
    $options['grid']['hoverable'] = true;
    $options['series'] = array(
        'bars' => array('show' => true),
        'points' => array('show' => true, 'radius' => 0, 'symbol' => 'square')
    );

如果你想避免显示这些点，你可以像我一样使用0的半径。悬停函数仍然有效，项对象存在于回调中，但对图表栏没有可见的更改。

相关文章：