如何在ExtJs中制作堆叠条形图

时间:2019-04-18 11:08:35

标签: extjs5 extjs-chart

请查看附件中的图表。这是带有堆积条形图系列的笛卡尔图。我已经创建了一个商店以及带有4个字段的模型。
可以说,我们有3个字段(x,y,z)(数字轴),yr(类别轴)。
要使用x和y绘制图表,我必须使用字段z值(%值)才能在条形图之外显示。

{ xtype: 'cartesian', colors: [ '#0084a9', '#a4b3b7', '#ffffff' ], insetPadding: { top: 0, left: 0, right: 0, bottom: 0 }, flipXY: true, bind: { store: '{ChartStore}' }, axes: [{ type: 'category', fields: [ 'yr' ], hidden: true, position: 'left' }, { type: 'numeric', fields: [ 'x', 'y', 'z' ], hidden: true, position: 'bottom' } ], series: [{ type: 'bar', label: { display: 'insideEnd',
field: [ 'x', 'y'
] }, subStyle: { strokeOpacity: 0, minGapWidth: 20 }, xField: 'yr', yField: [ 'x', 'y' ] }] }


当前结果
Current Chart


预期结果
Expected Chart


我的问题:
1)如何在中心显示系列标签(我没有在说轴标签,因为没有要显示的轴)?
根据extjs api文档,对于酒吧系列标签,应使用显示配置,该配置仅接受“ insideEnd”,“ insideStart”,“ outside”

2)如何在栏外显示字段Z值(即%值)?
3)是否可以实现圆棒?

0 个答案:

没有答案