如何在Sencha中设置饼图的边框

debugcn 发表于 Dev

拉姆·阿斯雷亚（Ram G Athreya）

嗨，有人知道如何在sencha touch中设置饼图的边框吗？我尝试了文档中的所有配置，但没有运气。

rixo

图表系列是使用精灵绘制的。您可以通过subStyle系列的选项传递自定义精灵属性。有关可用的属性，请参见Sprite文档（和CSS画布属性）。

请注意，该subStyle选项需要一个值数组，这些值将按顺序用于每个记录。

考虑到所有这些，我们可以通过以下方式在文档饼图示例中添加边框：

var chart = new Ext.chart.PolarChart({
    animate: true,
    interactions: ['rotate'],
    colors: ['#115fa6', '#94ae0a', '#a61120', '#ff8809', '#ffd13e'],
    store: {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
        data: [
            {name: 'metric one',   data1: 10, data2: 12, data3: 14, data4: 8,  data5: 13},
            {name: 'metric two',   data1: 7,  data2: 8,  data3: 16, data4: 10, data5: 3},
            {name: 'metric three', data1: 5,  data2: 2,  data3: 14, data4: 12, data5: 7},
            {name: 'metric four',  data1: 2,  data2: 14, data3: 6,  data4: 1,  data5: 23},
            {name: 'metric five',  data1: 27, data2: 38, data3: 36, data4: 13, data5: 33}
        ]
    },
    series: [{
        type: 'pie',
        label: {
            field: 'name',
            display: 'rotate'
        },
        xField: 'data3',
        donut: 30,

        // --- Modification Here! ---

        subStyle: {
            strokeStyle: ['black', 'black', 'black', 'black', 'black'],
            lineWidth: [2,2,2,2,2]
        }

        // ---

    }]
});
Ext.Viewport.setLayout('fit');
Ext.Viewport.add(chart);

我认为，仅在图表的外部添加边框会更加复杂。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。