2016-11-11 1 views
3

파이가 있습니다. ZingChart 간단한 데이터를 표시하는 데 사용하고 있습니다. 그것은 각도를 사용하여 발생하고 사용자가 드릴 다운 할 때 시리즈 객체를 업데이트합니다.ZingChart pie 툴팁이 표시되지 않습니다.

툴팁이 표시되지 않는 것을 제외하면 모든 것이 잘 작동합니다. 상호 작용이나 계열 할당에 관계없이 어느 시점에서도 표시되지 않습니다. 표준 마우스 오버는 작업을 강조 표시하고 노드를 클릭해도 괜찮지 만 툴팁은 표시되지 않습니다. 어떤 아이디어? 내가 누락 된 것을 해결할 수 없다! Heres what it looks like 내 차트 설정은 다음과 같습니다 chart-1- 우리의 구문 분석/선택 과정에 문제를 일으키는

{ 
     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

. idchart_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>

관련 문제