無法在xCharts中使用鼠標懸停工作

Question

我正在學習如何在我的PHP網站上使用xCharts，並一直遵循示例學習如何執行不同類型的圖表。唯一不適合我的是mouseover和mouseout函數。我一直在使用這個例子代碼：

  var tt = document.createElement('div'), 
      leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')), 
       topOffset = -32; 
      tt.className = 'ex-tooltip'; 
      document.body.appendChild(tt); 

      var data = { 
       "xScale": "time", 
       "yScale": "linear", 
       "main": [ 
       { 
        "className": ".pizza", 
        "data": [ 
        { 
         "x": "2012-11-05", 
         "y": 6 
        }, 
        { 
         "x": "2012-11-06", 
         "y": 6 
        }, 
        { 
         "x": "2012-11-07", 
         "y": 8 
        }, 
        { 
         "x": "2012-11-08", 
         "y": 3 
        }, 
        { 
         "x": "2012-11-09", 
         "y": 4 
        }, 
        { 
         "x": "2012-11-10", 
         "y": 9 
        }, 
        { 
         "x": "2012-11-11", 
         "y": 6 
        } 
        ] 
       } 
       ] 
      }; 
      var opts = { 
       "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); }, 
       "tickFormatX": function (x) { return d3.time.format('%A')(x); }, 
       "mouseover": function (d, i) { 
       var pos = $(this).offset(); 
       $(tt).text(d3.time.format('%A')(d.x) + ': ' + d.y) 
        .show(); 
       }, 
       "mouseout": function (x) { 
       $(tt).hide(); 
       } 
      }; 
      var myChart = new xChart('line-dotted', data, '#myChart', opts); 

只是要清楚，正在創建的圖表和數據是正確的，唯一缺少的東西是鼠標懸停，應根據該示例工作。任何想法爲什麼這不起作用？我錯過了什麼？

Answer 1

你必須包括.EX-提示的CSS，如果你檢查的例子，你會看到：

.ex-tooltip { 
    position: absolute; 
    background: #EEE; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    -ms-border-radius: 3px; 
    -o-border-radius: 3px; 
    border-radius: 3px; 
    padding: 5px; 
    -webkit-box-shadow: 0 1px 3px #000; 
    -moz-box-shadow: 0 1px 3px #000; 
    -ms-box-shadow: 0 1px 3px #000; 
    -o-box-shadow: 0 1px 3px #000; 
    box-shadow: 0 1px 3px #000; 
    border-collapse: separate; 
    display: none; 
}