javascript - 为Flot图表配置工具提示，其中数据来自ajax调用

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 = [];
        }
    }
}

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

Answer 1

多个问题:

1) 工具提示插件的选项属于 tooltip 而非 tooltips(已修复问题)。

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

3) 在 content 格式字符串变量中用 % 标记，而不是 $。

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