ZingChart 饼图工具提示未显示

Question

我有一个用于显示简单数据的饼图 ZingChart。当用户向下钻取时，它恰好使用 angular 并更新系列对象。

一切正常，除了...工具提示不显示？无论交互或系列分配如何，它都不会在任何时候显示。标准的鼠标悬停突出显示工作，单击节点很好，但没有工具提示。有任何想法吗？无法弄清楚我错过了什么！ 我的图表配置是：

{
        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'
        }]
      };

Answer 1

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({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
	<body>
		<div id="myChart"></div>
	</body>
</html>