Question

我在页面上有一系列图表，这些图表都是从ajax调用中获取数据的。我正在尝试实现工具提示插件。我设置了网格{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

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

1 个答案: