extjs - 如何在 Sencha 中为饼图设置边框

Question

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

Answer 1

图表系列是使用sprites绘制的。您可以通过subStyle系列的选项传递自定义精灵属性。有关可用属性，请参阅精灵文档（和 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);

我认为，仅将边框添加到图表的外部部分会复杂得多。