javascript
  • modal-dialog
  • tooltip
  • 2016-08-08 5 views 0 likes 
    0

    私はモーダルウィンドウ上にグラフを表示するためにflot Chartライブラリを使用します。これはうまく機能しますが、プッシュオーバーするとツールチップのポップオーバーは表示されません。 $(文書).on( '[= "#1 evolutieProdus" データ・ターゲット]'、 'クリック'、機能(){私は見つけるツールチップplothoverはモーダルには表示されません

    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; 
           } 
          }); 
         } 
        });    
    }); 
    
    +0

    あなたが使っているライブラリへのリンク、あなたが使っているコード、今まで何を試してみましたか? –

    +0

    http://www.flotcharts.org/。これは私が使ったライブラリです。 –

    答えて

    0

    :ここ

    は私の.jsコードですあなたのツールチップクラスにz-indexプロパティを設定します。

    関連する問題