如何隐藏zingchart饼图中的0%标签

Question

我正在使用 zingchart，当我做饼图时，如果有一个切片为零，它会在图表示例上显示 0% 标签：

如果我有以下类别答：40 乙：60 C: 0

这将显示一个饼图，其中 60% 的标签将显示在选项 B 上，40% 的标签将显示在选项 A 上，但这也会在选项 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>

Answer 1

这很容易缓解。在 ZingChart 库中，这是一个名为 rules 的属性。这与 if 语句最相似。所以如果 value == 0 显示 text:'' （空白文本）

valueBox: {
  ...
  rules: [
    {
       rule: '%v === 0',
       text: ''
    }
 ]

rules docs

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>

如何隐藏zingchart饼图中的0%标签

How to hide the 0% label in zingchart pie charts

html

javascript

charts

graph

zingchart