Question

我使用flot Chart库在模态窗口上显示图形。它工作正常，但是当我进行修改时，Tooltip popover不会出现。

这是我的.js代码： $（文件）。在（＆＃39;单击＆＃39;＆＃39;一个[数据目标=＆＃34;＃evolutieProdus＆＃34;]＆＃39;，函数（）{

    var route = 'http://www.fabricademagie.ro/metronic/comenzi/returnOrdersYear';
    var productcode = $(this).data('productcode');
    var productid = $(this).data('productid');
    var data = {
        'productcode': productcode,
        'productid': productid
    };

    $.post(route,data,function(response){

        response = jQuery.parseJSON(response);
        //console.log(response);

        var obj = response.an ;
        var an_prezent = Object.keys(obj).map(function(e){
            return [Number(e), obj[e]];
        });

        var obj2 = response.precedent ;
        var an_precedent = Object.keys(obj2).map(function(e){
            return [Number(e), obj2[e]];
        });

        var obj3 = response.second ;
        var an_secund = Object.keys(obj3).map(function(e){
            return [Number(e), obj3[e]];
        });

        function showChartTooltip(x, y, xValue, yValue, color) {
            var _item = $('<div id="tooltip" class="chart-tooltip2">' + yValue + '<\/div>').css({
                position: 'absolute',
                display: 'none',
                top: y,
                left: x,
                border: '0px solid #ccc',               
                padding: '2px 6px',
                'color' : color,
                'border' : '1px solid #000',
                'background-color': '#CCC !important'
            }).appendTo("#evolutieProdus").fadeIn(300);
            _item.css('left',x - (_item.width() - -20));
        }   

        if ($('#chart_2').size() != 0) {
            //$('#orders_year_loading').hide();
            //$('#orders_year_content').show(); 
        var plot_statistics = $.plot($("#chart_2"),
            [{
                data: an_prezent,
                lines: {
                    show: true,
                    fill: false,
                    lineWidth: 5
                },
                color: '#D91E18',
                shadowSize: 0,
                label: " Anul <?=date('Y');?>"
            },{
                data: an_prezent,
                points: {
                    show: true,
                    fill: true,
                    radius: 7,
                    fillColor: "#D91E18",
                    lineWidth: 5
                },
                color: '#fff',
                shadowSize: 1
            },{
                data: an_precedent,
                lines: {
                    show: true,
                    fill: false,
                    lineWidth: 3
                },
                color: '#00BCD4',
                shadowSize: 0,
                label: " Anul <?=date('Y') - 1;?>"
            },{
                data: an_precedent,
                points: {
                    show: true,
                    fill: true,
                    radius: 5,
                    fillColor: "#00BCD4",
                    lineWidth: 3
                },
                color: '#fff',
                shadowSize: 1
            },{
                data: an_secund,
                lines: {
                    show: true,
                    fill: false,
                    lineWidth: 3
                },
                color: '#FF9800',
                shadowSize: 0,
                label: " Anul <?=date('Y') - 2;?>"
            },{
                data: an_secund,
                points: {
                    show: true,
                    fill: true,
                    radius: 5,
                    fillColor: "#FF9800",
                    lineWidth: 3
                },
                color: '#fff',
                shadowSize: 1
            }],
            {
                xaxis: {
                    tickLength: 0,
                    tickDecimals: 0,
                    mode: "categories",
                    min: 0,
                    font: {
                        lineHeight: 34,
                        style: "normal",
                        variant: "small-caps",
                        color: "#FF5722"
                    }
                },
                yaxis: {
                    ticks: 5,
                    tickDecimals: 0,
                    tickColor: "#eee",
                    font: {
                        lineHeight: 34,
                        style: "normal",
                        variant: "small-caps",
                        color: "#6F7B8A"
                    }
                },
                grid: {
                    hoverable: true,
                    borderWidth: 0,
                    margin: 5
                }
            });
            var previousPoint = null;
                $("#chart_2").bind("plothover", function (event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));
                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

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

                        var _color = "#212121";
                        if(item.series.points.fillColor !== undefined && item.series.points.fillColor !== null && item.series.points.fillColor.length){_color = item.series.points.fillColor;}    

                        showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + ' Bucati vandute',_color);
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        }
    });             
});

Answer 1

我找到了解决方案。我在工具提示类上放了一个z-index属性。

工具提示plothover不会出现在模态上

1 个答案: