如何自定义 ExtJS.chart.PieChart 各分块的颜色
ExtJS 对其 Chart 的文档一直是语焉不详, 所以也一直没有从其文档中找到自定义 ExtJS.chart.PieChart 各个分块颜色的方法, 通过查找 YUI Chart 的文档( ExtJS 的 chart 就是 YUI Chart),终于找到了自定义各个分块颜色的方法,通过设置 series 的样式可以实现,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var pie = Ext.create({ width: 220, height: 132, store: store, xtype: 'piechart' , series: [ { categoryField: 'name' , dataField: 'visits' , style: { colors: [ '#FFFF00' , '#FFCC00' , '#FF9900' , '#FF6600' , '#FF3300' , '#FF0000' , '#660000' , '#663300' ] } } ] }); pie.render( 'pie-container-id' ); |
![]() |
![]() |
之前的效果 | 之后的效果 |
当然,其它类型的 chart 也可以通过这种方式进行设置。
ExtJS chart 完整的文档请参考 YUI Chart 的文档 。
张志敏所有文章遵循创作共用版权协议,要求署名、非商业 、保持一致。在满足创作共用版权协议的基础上可以转载,但请以超链接形式注明出处。
本博客已经迁移到 GitHub , 围观地址: https://beginor.github.io/
分类:
Ext JS
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架