2016-11-11 232 views
3

我有一個餅ZingChart我用來顯示簡單的數據。恰好在使用角度並在用戶鑽取時更新系列對象。ZingChart餅圖工具提示不顯示

一切工作正常,除了...工具提示不顯示?不管交互作用或系列作業如何,它都不會顯示在任何位置。標準的鼠標懸停突出顯示工作,點擊節點很好,但沒有工具提示。有任何想法嗎?找不到我失蹤的東西! Heres what it looks like 我的圖表配置是:

{ 
     type: "pie", 
     id: 'chart-1', 
     title: { 
      textAlign: 'center', 
      text: "Loading..." 
     }, 
     "legend":{ 
      "border-width":1, 
      "border-color":"gray", 
      "border-radius":"5px",    
      "marker":{ 
      "type":"circle" 
      }, 
      "toggle-action":"remove", 
      "icon":{ 
      "line-color":"#9999ff" 
      } 
     }, 
     "plot": { 
      "animation":{ 
      "on-legend-toggle": true, 
      "effect": 5, 
      "method": 1, 
      "sequence": 1, 
      "speed": 0.7 
      }, 
      "value-box": { 
      "text": "$%v", 
      "negation": "currency", 
      "thousands-separator": ",", 
      "font-color": "black", 
      "placement":"in", 
      "offset-r":"50%", 
      "font-size":"12"    
      }, 
      "tooltip":{ 
      "text":"%t: %v (%npv%)"     
      }, 
      "decimals": "0", 
      "detach": false 
     }, 
     series: [], 
     shapes: [{ 
      type: 'triangle', 
      backgroundColor: '#66ccff', 
      size: 10, 
      angle: -90, 
      x: 20, 
      y: 20, 
      cursor: 'hand', 
      id: 'backwards' 
     }] 
     }; 

回答

4

chart-1-引起的問題與我們的解析/選擇過程。如果您將id更改爲chart_1一切都會正常工作。

var myConfig = { 
 
"graphset":[ 
 
    { 
 
     "type":"pie", 
 
     "id":"chart_1", 
 
     "title":{ 
 
      "textAlign":"center", 
 
      "text":"Loading..." 
 
     }, 
 
     "legend":{ 
 
      "border-width":1, 
 
      "border-color":"gray", 
 
      "border-radius":"5px", 
 
      "marker":{ 
 
       "type":"circle" 
 
      }, 
 
      "toggle-action":"remove", 
 
      "icon":{ 
 
       "line-color":"#9999ff" 
 
      } 
 
     }, 
 
     "plot":{ 
 
      "animation":{ 
 
       "on-legend-toggle":true, 
 
       "effect":5, 
 
       "method":1, 
 
       "sequence":1, 
 
       "speed":0.7 
 
      }, 
 
      "value-box":{ 
 
       "text":"$%v", 
 
       "negation":"currency", 
 
       "thousands-separator":",", 
 
       "font-color":"black", 
 
       "placement":"in", 
 
       "offset-r":"50%", 
 
       "font-size":"12" 
 
      }, 
 
      "decimals":"0", 
 
      "detach":false 
 
     }, 
 
     "tooltip":{ 
 
      "text":"%t: %v (%npv%)" 
 
     }, 
 
     "series":[ 
 
      { 
 
       "values":[118], 
 
       "text":"0-30" 
 
      }, 
 
      { 
 
       "values":[118], 
 
       "text":"0-30" 
 
      }, 
 
      { 
 
       "values":[118], 
 
       "text":"0-30" 
 
      } 
 
     ], 
 
     "shapes":[ 
 
      { 
 
       "type":"triangle", 
 
       "backgroundColor":"#66ccff", 
 
       "size":10, 
 
       "angle":-90, 
 
       "x":20, 
 
       "y":20, 
 
       "cursor":"hand", 
 
       "id":"backwards" 
 
      } 
 
     ] 
 
    } 
 
] 
 
}; 
 

 
zingchart.render({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});
html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
    </head> 
 
\t <body> 
 
\t \t <div id="myChart"></div> 
 
\t </body> 
 
</html>