是否有任何方法实现自定义工具提示来可视化附加到特定节点的值?例如{id:"1",name:"Socialmedia",gbw:123,mbw:365,parent:"0",value:150}这些值附加在树的特定节点上。当鼠标悬停时，我需要显示"值作为工具提示。
tooltip: {
text : "Guranteed Bandwidth: %node-gbw <br>Maximum Bandwidth:"
}
我在工具提示中尝试了这段代码和%data-gbw。但是悬停时它什么也不显示。zing图表支持这种类型的可视化吗?
在系列数据中使用data-标记应该能够实现这一点。例如
series: [{
values : [counts[0]],
"data-msg" : "Fast enough",
text: "< 400 ms",
backgroundColor: '#92BCEA',
detached: true
},
tooltip : {
fontSize : '18',
fontFamily : "Open Sans",
padding: "5 10",
text: "%plot-text is %data-msg"
},
// CHART CONFIG
// -----------------------------
let counts = [0.62, 0.15, 0.15, 0.06];
let chartConfig = {
type : 'pie',
title: {
text: 'Time to Load',
align: "center",
offsetX: 10,
fontSize: 25
},
valueBox: {
placement: 'out',
text: '%tn%npv%',
fontFamily: "Open Sans"
},
legend: {
backgroundColor: "#eee",
fontSize: '1.5em',
width: '150em'
},
tooltip : {
fontSize : '18',
fontFamily : "Open Sans",
padding: "5 10",
text: "%plot-text is %data-msg"
},
series: [{
values : [counts[0]],
"data-msg" : "Fast enough",
text: "< 400 ms",
backgroundColor: '#92BCEA',
detached: true
},
{
values: [counts[1]],
"data-msg" : "So so",
text: "400-599 ms",
backgroundColor: '#5E7A97'
},
{
"values": [counts[2]],
"data-msg" : "Slow!",
"text": '600-799 ms',
"backgroundColor": '#617073',
},
{
"text": '800+ms',
"values": [counts[3]],
"backgroundColor": '#171A21',
"data-msg" : "Really slow!"
}]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});@import 'https://fonts.googleapis.com/css?family=Open+Sans';
.zc-body { background-color: #2B313B; }
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</body>
</html>注:我为青软工作，但如果你想从我们这里获得更可预测的支持，欢迎你通过支持或使用我们的工作室制作演示。我给你放了一个完整的工作演示- https://app.zingsoft.com/demos/create/8OYIRFIC