我正在使用zingchart，当我进行饼图时，如果切片为零，则在图表示例中显示0％标签：
如果我有以下类别 答：40 B：60 C：0
这将显示一个饼图，其中60％标签将显示在选项B上，40％标签将显示在选项A上，但这也会在图表中间显示0％标签。
如果值为0％
，则可能无法显示标签这是我的配置
globals: {
shadow: false,
fontFamily: "Verdana",
fontWeight: "100"
},
type: "pie",
backgroundColor: "#fff",
legend: {
align: 'right',
verticalAlign: 'middle',
toggleAction: 'remove',
maxItems: 8,
overflow: 'scroll',
scroll: {
bar: {
backgroundColor: '#bbff33 #99e600',
borderLeft: '1px solid #88cc00'
},
handle: {
backgroundColor: '#66cc66',
borderLeft: '1px solid #339933',
borderRight: '1px solid #339933',
borderTop: '1px solid #339933',
borderBottom: '1px solid #339933',
borderRadius: '2px'
}
},
borderWidth: 1,
borderColor: '#88cc00',
borderRadius: '3px',
marker: {
type: 'circle'
},
mediaRules: [
{
maxWidth: 500,
item: {
fontSize: 10
},
scroll: {
bar: {
backgroundColor: '#e6f0ff #99c2ff',
borderLeft: '1px solid #0066ff'
},
handle: {
backgroundColor: '#99ccff',
borderLeft: '1px solid #3399ff',
borderRight: '1px solid #3399ff',
borderTop: '1px solid #3399ff',
borderBottom: '1px solid #3399ff',
borderRadius: '2px'
}
},
borderColor: '#0066ff',
marker: {
size: 4
}
},
{
maxWidth: 300,
maxItems: 6,
item: {
fontSize: 9,
margin: 1
},
scroll: {
bar: {
width: '50%',
backgroundColor: '#e6e6ff #b3b3ff',
borderLeft: '1px solid #9999ff'
},
handle: {
width: '50%',
backgroundColor: '#cc99ff',
borderLeft: '1px solid #9933ff',
borderRight: '1px solid #9933ff',
borderTop: '1px solid #9933ff',
borderBottom: '1px solid #9933ff',
borderRadius: '2px'
}
},
borderColor: '#9999ff',
marker: {
size: 3
}
}
]
},
tooltip: {
text: "%t"
},
plot: {
refAngle: "-90",
borderWidth: "0px",
valueBox: {
placement: "in",
text: "%npv %",
fontSize: "15px",
textAlpha: 1,
}
},
series: [{
text: "(" + 40 + ") A ",
values: [d.soporte],
backgroundColor: "#004d99"
}, {
text: "(" + 60 + ") B ",
values: [d.estudio],
backgroundColor: "#808000"
}, {
text: "(" + 0 + ") C ",
values: [0],
backgroundColor: "#cc6600"
}]
var myConfig = {
globals: {
shadow: false,
fontFamily: "Verdana",
fontWeight: "100"
},
type: "pie",
backgroundColor: "#fff",
legend: {
align: 'right',
verticalAlign: 'middle',
toggleAction: 'remove',
maxItems: 8,
overflow: 'scroll',
scroll: {
bar: {
backgroundColor: '#bbff33 #99e600',
borderLeft: '1px solid #88cc00'
},
handle: {
backgroundColor: '#66cc66',
borderLeft: '1px solid #339933',
borderRight: '1px solid #339933',
borderTop: '1px solid #339933',
borderBottom: '1px solid #339933',
borderRadius: '2px'
}
},
borderWidth: 1,
borderColor: '#88cc00',
borderRadius: '3px',
marker: {
type: 'circle'
},
mediaRules: [
{
maxWidth: 500,
item: {
fontSize: 10
},
scroll: {
bar: {
backgroundColor: '#e6f0ff #99c2ff',
borderLeft: '1px solid #0066ff'
},
handle: {
backgroundColor: '#99ccff',
borderLeft: '1px solid #3399ff',
borderRight: '1px solid #3399ff',
borderTop: '1px solid #3399ff',
borderBottom: '1px solid #3399ff',
borderRadius: '2px'
}
},
borderColor: '#0066ff',
marker: {
size: 4
}
},
{
maxWidth: 300,
maxItems: 6,
item: {
fontSize: 9,
margin: 1
},
scroll: {
bar: {
width: '50%',
backgroundColor: '#e6e6ff #b3b3ff',
borderLeft: '1px solid #9999ff'
},
handle: {
width: '50%',
backgroundColor: '#cc99ff',
borderLeft: '1px solid #9933ff',
borderRight: '1px solid #9933ff',
borderTop: '1px solid #9933ff',
borderBottom: '1px solid #9933ff',
borderRadius: '2px'
}
},
borderColor: '#9999ff',
marker: {
size: 3
}
}
]
},
tooltip: {
text: "%t"
},
plot: {
refAngle: "-90",
borderWidth: "0px",
valueBox: {
placement: "in",
text: "%npv %",
fontSize: "15px",
textAlpha: 1,
}
},
series: [{
text: "(" + 40 + ") A ",
values: [40],
backgroundColor: "#004d99"
}, {
text: "(" + 60 + ") B ",
values: [60],
backgroundColor: "#808000"
}, {
text: "(" + 0 + ") C ",
values: [0],
backgroundColor: "#cc6600"
}]
}
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://demos-stage.zingchart.com/zingchart/zingchart.min.js'></script>
<script> ZC.MODULESDIR = '//demos-stage.zingchart.com/zingchart/modules/';</script>
</head>
<body>
<div id="myChart"></div>
</body>
</html>
答案 0 :(得分：2)
这很容易缓解。在ZingChart库中，这是一个名为rules的属性。这与if语句最相似。因此，如果value == 0显示text:''（空白文本）
valueBox: {
...
rules: [
{
rule: '%v === 0',
text: ''
}
]
tokens doc。这是%v来自的地方。
var myConfig = {
globals: {
shadow: false,
fontFamily: "Verdana",
fontWeight: "100"
},
type: "pie",
backgroundColor: "#fff",
legend: {
align: 'right',
verticalAlign: 'middle',
toggleAction: 'remove',
maxItems: 8,
overflow: 'scroll',
scroll: {
bar: {
backgroundColor: '#bbff33 #99e600',
borderLeft: '1px solid #88cc00'
},
handle: {
backgroundColor: '#66cc66',
borderLeft: '1px solid #339933',
borderRight: '1px solid #339933',
borderTop: '1px solid #339933',
borderBottom: '1px solid #339933',
borderRadius: '2px'
}
},
borderWidth: 1,
borderColor: '#88cc00',
borderRadius: '3px',
marker: {
type: 'circle'
},
mediaRules: [
{
maxWidth: 500,
item: {
fontSize: 10
},
scroll: {
bar: {
backgroundColor: '#e6f0ff #99c2ff',
borderLeft: '1px solid #0066ff'
},
handle: {
backgroundColor: '#99ccff',
borderLeft: '1px solid #3399ff',
borderRight: '1px solid #3399ff',
borderTop: '1px solid #3399ff',
borderBottom: '1px solid #3399ff',
borderRadius: '2px'
}
},
borderColor: '#0066ff',
marker: {
size: 4
}
},
{
maxWidth: 300,
maxItems: 6,
item: {
fontSize: 9,
margin: 1
},
scroll: {
bar: {
width: '50%',
backgroundColor: '#e6e6ff #b3b3ff',
borderLeft: '1px solid #9999ff'
},
handle: {
width: '50%',
backgroundColor: '#cc99ff',
borderLeft: '1px solid #9933ff',
borderRight: '1px solid #9933ff',
borderTop: '1px solid #9933ff',
borderBottom: '1px solid #9933ff',
borderRadius: '2px'
}
},
borderColor: '#9999ff',
marker: {
size: 3
}
}
]
},
tooltip: {
text: "%t"
},
plot: {
refAngle: "-90",
borderWidth: "0px",
valueBox: {
placement: "in",
text: "%npv %",
fontSize: "15px",
textAlpha: 1,
rules: [
{
rule: '%v === 0',
text: ''
}
]
}
},
series: [{
text: "(" + 40 + ") A ",
values: [40],
backgroundColor: "#004d99"
}, {
text: "(" + 60 + ") B ",
values: [60],
backgroundColor: "#808000"
}, {
text: "(" + 0 + ") C ",
values: [0],
backgroundColor: "#cc6600"
}]
}
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>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";</script>
</head>
<body>
<div id="myChart"></div>
</body>
</html>