Question

您好我正在尝试将工具提示放在flot图表上，下面是我的代码，任何机构都可以告诉我问题在哪里。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
 <script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p id="choices">Show:</p>
 <p class="graphControls">
    <input type="button" value="stack">
    <input type="button" value="Bars">
    <input type="button" value="Lines">
    </p>
    <p><label><input id="enableTooltip" type="checkbox">Enable tooltip</label></p>
<script language="javascript"  type="text/javascript" >
var urlDataPart = "3 10 0 1 2 3 4 5 6 7 8 9 " +
                   "'Trans1' 20 23 20 40 12 56 10 70 20 30 " +
                   "'Trans2' 15 12 25 23 56 34 45 23 12 56 " +
                   "'Trans3' 12 45 23 12 34 89 12 70 34 30 ";

$(function () {
    var datasets=[];
    var data=urlDataPart.split(" ");
    var seriesNum = parseInt(data[0]);
    var pointNum = parseInt(data[1]);
    var count = 2;
    var intervals = [];
    for (var i = 0; i < pointNum; i++) {
        intervals[i] = data[count];
        count++;
    }

    for (var i = 0; i < seriesNum; i++) {
        var d1 = [];
        var label_str=data[count];


        count++;
        for (var j = 0; j < pointNum; j++) {
            if (j == 0) {
                d1.push([]);
            }
            d1.push([intervals[j], data[count]]);
            count++;
        }
        datasets[i] =  {label:label_str,data:d1};
    }

    var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });

    var choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append('<br/><input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<label for="id' + key + '">'
                                + val.label + '</label>');
    });
    choiceContainer.find("input").click(plotAccordingToChoices);
    var stack = true, Area=true,StackedBar = false, LineGraph = true,points=true;

    $(".graphControls input").click(function (e) {
             var line;
             e.preventDefault();
             stack=true;
             Area=true;
             StackedBar=false;
             LineGraph=true;
             points=true;
             StackedBar = $(this).val().indexOf("Bars") != -1;
             Area = $(this).val().indexOf("stack") != -1;
             if(StackedBar){
                points=false;
                LineGraph=false;
             }
             if(!Area && !StackedBar){
                stack=null;
             }
            plotAccordingToChoices();
    });


    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY,
                                item.series.label + " of " + x + " = " + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
    });

    function plotAccordingToChoices() {
        var data = [];
        var data1=[[0,0]];
        var flag=false;
        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
                flag=true;
        });

        if(!flag){
             $.plot($("#placeholder"), data1, {
                series:{
                    stack:true,
                    lines:{
                        show:true,
                        fill:true,
                        fillColor: { colors: [  { opacity: 0.7}, {opacity: 10 } ] }
                    },
                    points:{
                        show:true
                    },
                    grid: { hoverable: true, clickable: true },
                    yaxis: { min: 0 },
                    xaxis: { tickDecimals: 0 }
                }
            });
        }

        if (data.length > 0 && flag){
            $.plot($("#placeholder"), data, {
                series:{
                    stack:stack,
                    lines:{
                            show:LineGraph,
                            fill:Area,
                            fillColor: { colors: [  { opacity: 0.7}, {opacity: 10 } ] }
                    },
                    bars: { show: StackedBar, barWidth: .10 },
                    points:{
                        show:points
                    },
                    grid: { hoverable: true},
                    yaxis: { min: 0 },
                    xaxis: { tickDecimals: 0 }
                }
            });
         }
    }

    plotAccordingToChoices();
 }   


     );

    </script>

</body>
</html>

Answer 1

你在剧情选项中犯了一个微妙的错误。 grid，yaxis和xaxis选项都嵌套在series选项中。它们应该是这样的顶级选项：

$.plot($("#placeholder"), data1, {
        series: {
            stack: true,
            lines: {
                show: true,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 0.7
                    }, {
                        opacity: 10
                    }]
                }
            },
            points: {
                show: true
            }
        },  //added this to close the series options
        grid: {
            hoverable: true,
            clickable: true
        },
        yaxis: {
            min: 0
        },
        xaxis: {
            tickDecimals: 0
        }

    });//removed an extra bracket here

这样做的关键是启用hoverable业务，这是您所缺少的。

将来，请将您的代码示例缩减为相关部分。如果您仅通过基本绘图调用和占位符div看到错误，只需发布该代码即可。我们不需要创建数据集和切换所需的所有位（除非这会导致错误）。您经常会发现，通过消除代码其他部分的复杂性，您将发现您遇到的错误（可能不是在这种情况下，但仍然！）。

如何将标签工具提示放在Flot Chart上

1 个答案: