ExtJS 图表系列的渲染器功能答案

【问题标题】：Renderer function for ExtJS chart seriesExtJS 图表系列的渲染器功能
【发布时间】：2012-07-31 10:57:24
【问题描述】：

我使用ExtJS系列渲染器函数来设置散点图的fill属性，而不是使用markerConfig属性。因为我想为每个点填充不同的颜色。它工作正常。

renderer : function(sprite, record, attr, index, store) {
   Ext.apply(attr, {
       fill : '#F00'
   }
}

但我想设置type 属性，以便每个点以不同的类型显示，如圆形、十字形、加号、菱形等。它不工作。以及散点的半径，我无法在渲染器函数中设置属性。

如何在渲染器函数中做到这一点？

【问题讨论】：

标签： extjs

【解决方案1】：

为此，您只需使用这些类型（根据文档）：

circle - 绘制圆圈。您可以使用半径设置半径 sprite 配置中的参数。
rect - 渲染矩形。可以设置宽度和高度通过使用精灵中的宽度和高度参数来绘制矩形配置。
text - 将文本渲染为精灵。您可以通过以下方式设置字体/字体大小使用字体参数。
path - 最强大的精灵类型。有了它，您可以创建使用 SVG 路径语法的任意形状。你可以快速找到有关如何在此处开始使用路径语法的教程。

例如，如果您需要 plus，您可以这样做：

renderer : function(sprite, record, attr, index, store) {
    var plus="M-1.1538461538461537,-1.1538461538461537l0,-2.3076923076923075,2.3076923076923075,0,0,2.3076923076923075,2.3076923076923075,0,0,2.3076923076923075,-2.3076923076923075,0,0,2.3076923076923075,-2.3076923076923075,0,0,-2.3076923076923075,-2.3076923076923075,0,0,-2.3076923076923075,z";
    return Ext.apply(attr, { fill: '#F00', type: 'path', path: plus });
}

文档链接：http://www.sencha.com/learn/drawing-and-charting/

【讨论】：