为数据来自 ajax 调用的 Flot 图表配置工具提示

Question

我在一个页面上有一系列图表，它们都是从 ajax 调用中获取数据的。我正在尝试实现工具提示插件。我已经设置了 grid{ hoverable: true} 但我仍然没有收到任何工具提示。

我的图表之一的代码...

$(function() {
    var data = [];

    getData();

    function getData() {
        $.ajaxSetup({cache:false});
        $.ajax({
            url:'data/prod.php',
            dataType:'json',
            success:update,
            error: function(){
            }
        });
    }

    function update(ajaxdata) {
        if(ajaxdata){
            $.each(ajaxdata, function(key, value){
                data.push(value);
            });

            if(data.length>0){
                $.plot('#graph-1', [data], {
                    series: {color:"#009390",
                    bars: {
                        show: true,
                        barWidth: 0.5,
                        fill: 0.7,
                        align: "center"
                    },
                    grid: {
                        hoverable: true
                    },
                    tooltip: { //corrected from tooltips to tooltip but issue remains
                        show: true,
                        content: "$s: $x - $y"
                    },
                    legend:{
                        show: false
                    }
                },
                xaxis: {
                    mode: "categories",
                    tickLength: 0,
                    axisLabel: 'Product Categories',
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 15,
                    axisLabelColour: '#333',
                    axisLabelPadding: 10
                },
                yaxis:{
                    axisLabel: 'Number of Products',
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 15,
                    axisLabelColour: '#333',
                    axisLabelPadding: 10
                }
            });

            $('#graph-1').css('background','#fff');
            data = [];
        }
    }
}

我看过一些绑定到 plothover 事件的示例，但我不确定如何将其实现到上面的代码中，其中绘图是从 ajax 调用启动的。

Answer 1

多个问题：

1) 工具提示插件的选项属于 tooltip 而不是 tooltips（已在问题中修复）。

2) grid 和 tooltip 选项都不属于 series 选项之下，而是在它们旁边。

3) 在 content 格式字符串变量中标记为 % 而不是 $.

修复所有这些导致工作工具提示：Fiddle

为数据来自 ajax 调用的 Flot 图表配置工具提示

Configuring tooltips for Flot charts where data is from an ajax call

javascript

ajax

jquery

flot