3
Я использую zingchart и когда я делаю круговую диаграмму, если Theres кусочек, который имеет ноль он показывает 0% метка над примером диаграммы:Как скрыть 0% метку в zingchart круговых диаграммах
если я имеет следующие категории A: 40 B: 60 с: 0
Это будет отображать круговую диаграмму, где 60% Метка будет отображаться по варианте в и 40% этикетках будут отображаться по варианту а , но это также отобразило бы метку 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 {
\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://demos-stage.zingchart.com/zingchart/zingchart.min.js'></script>
\t \t <script> ZC.MODULESDIR = '//demos-stage.zingchart.com/zingchart/modules/';</script>
</head>
\t <body>
\t <div id="myChart"></div>
\t </body>
</html>