Highcharts中的Highslide彈出窗口不能正常顯示

當您在此示例中單擊某個數據點時，會彈出對話框，但它完全位於角落，並且尺寸不合適。任何人都可以看到任何即時問題Highcharts中的Highslide彈出窗口不能正常顯示

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Highcharts Example</title> 
<!-- Additional files for the Highslide popup effect --> 
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script> 
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script> 
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" /> 


     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
$(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'scatter', 
       zoomType: 'xy' 
      }, 
      title: { 
       text: 'Companies' 
      }, 
      subtitle: { 
       text: 'data.com proprietary professional' 
      }, 
      xAxis: { 
       title: { 
        enabled: true, 
        text: 'Future Outlook' 
       }, 
       startOnTick: true, 
       endOnTick: true, 
       showLastLabel: true 
      }, 
      yAxis: { 
       title: { 
        text: 'Current Quarter' 
       }, 
        labels: { 
     formatter: function() { 
      return this.value + ' '; 
     } 
    }, 

      }, 
      legend: { 
       layout: 'vertical', 
       align: 'left', 
       verticalAlign: 'top', 
       x: 100, 
       y: 70, 
       floating: true, 
       backgroundColor: '#FFFFFF', 
       borderWidth: 1 
      }, 
      plotOptions: { 
       scatter: { 
        marker: { 
         radius: 5, 
         states: { 
          hover: { 
           enabled: true, 
           lineColor: 'rgb(100,100,100)' 
          } 
         } 
        }, 
        states: { 
         hover: { 
          marker: { 
           enabled: true 
          } 
         } 
        }, 
        tooltip: { 
         headerFormat: '<b>{series.name}</b><br>', 
         pointFormat: '{point.x} cm, {point.y} kg' 
        }, 



       cursor: 'pointer', 
       events: { 
          click: function() { 
           hs.htmlExpand(null, { 
            pageOrigin: { 
             x: this.pageX, 
             y: this.pageY 
            }, 
    //         headingText: this.series.name, 
            maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ 
             this.y +' visits', 
            width: 200 
           }); 
          } 
       } 



       } 
      }, 



        series: [{ 
        name: 'Nasdaq', 
        color: 'red', 
      data: [ 
      { y: 1,x:4,ticker:'KORS'}, {y: 5,x:2,ticker:'LULU'}, {x:0,y:0,ticker:'ZNGA'}, {x:.4,y:1,ticker:'JCP'}, {x:.6,y:2.5,ticker:'DECK'} 

      ]},{name:'SP',color:'green',data:[ 
     {x:6,y:6,ticker:'lulu'},{x:10,y:10,ticker:'GPS'},{x:7,y:6.6,ticker:'FB'} 
     ]},{name:'Inline Company Performance',color:'darkgrey',data:[ 

     {x:5,y:5,ticker:'GIII'},{x:5.3,y:4.3,ticker:'BNNY'} 

     ]}] 





     }); 
    }); 


     </script> 
    </head> 
    <body> 
<script src="../../js/highcharts.js"></script> 
<script src="../../js/modules/exporting.js"></script> 

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
    </body> 
</html>

來源

2013-03-28 D3Chiq

this.pageX和this.pageY是不確定的，你現在有他們。

替換此：

click: function() { 
    hs.htmlExpand(null, { 
     pageOrigin: { 
      x: this.pageX, 
      y: this.pageY 
     }, 
     headingText: this.name, 
     maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ 
     this.y +' visits', 
     width: 200 
    }); 
}

與此：

click: function(e) { 
    hs.htmlExpand(null, { 
     pageOrigin: { 
      x: e.pageX, 
      y: e.pageY 
     }, 
     headingText: this.name, 
     maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ 
     this.y +' visits', 
     width: 200 
    }); 
}

調用的 'e' 在（）的函數，並且參考其用於pageX屬性和pageY

編輯澄清並回答你的第二個問題：

如果您將事件放入點對象中，則可以跳過上述更改，然後可以使用this.x和this.y從點擊的點拉入其他數據元素：

  cursor: 'pointer', 
      point: { 
       events: { 
         click: function() { 
          hs.htmlExpand(null, { 
           pageOrigin: { 
            x: this.pageX, 
            y: this.pageY 
           }, 
           headingText: this.series.name, 
           maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ 
            this.y +' visits', 
           width: 200 
          }); 
         } 
       } 
      }

雖然您試圖格式化爲日期不是日期，所以你會得到從大概1969年12月31日的x值...

來源

2013-03-28 19:44:41 jlbriggs

你怎麼能看到這個？我在調查Chrome控制檯時沒有注意到。但你是對的，改變了它的工作。如果它不是太多，那麼如何能夠將'ticker'類別或另一部分數據導入該彈出窗口？當前的「this.y」和「this.x」不起作用，而將其改爲「e.y」也不行。 – D3Chiq

請參閱上面的編輯答案 – jlbriggs

使用this.category如果你需要的值X軸

來源

2015-03-10 05:32:23 Shashi

Highcharts中的Highslide彈出窗口不能正常顯示

回答

相關問題