Previous topicNext topic
WebBuilderX > 子页面组件元素 > 图表类元素 >
饼图

饼图无需坐标系和坐标轴就可直接生成。如下图,这里只要配置数据系列所用到的列就行了:

生成的饼图效果如下:

如要将标签显示在图表内部,可单击“数据标签”旁边的设置按钮,配置以下参数:

其中,标签位置设为“inside”,内容格式器为“{b}\n{d}%”。在饼图中, {a}模板变量表示系列名称,{b}表示数据名称,{c}表示数据值,{d}表示百分比,\n表示换行。图表效果如下:

饼图中的圆心坐标和半径写法与极坐标系完全相同,具体请参考“坐标系”。假如将饼图半径设为:

['30%','70%']

这样就会得到圆环性质的饼图:

当显示为圆环时,可以配合高亮标签设置,将数据标签显示在饼图中间的空白部分。具体设置方法如下:首先取消勾选“避免数据标签重复”,并将数据标签里的“显示标签”取消勾选,同时清空标签内容格式器、将标签位置设为“center”:

然后打开高亮标签配置项,并作如下设置:

这样设置的意思是,数据标签虽然默认不显示,但仍然将它的位置放到center中心。什么时候显示呢?当鼠标经过某个数据块高亮的时候才显示数据标签。由于数据标签被指定到center中心位置,而高亮的时候又将文字大小设为16,显示的内容还是“{b}\n{d}%”,所以最终效果就变为,当鼠标经过数据区域时才在中心位置显示其对应的数据标签。如下图: