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

Posted 2023-02-25

【中文标题】如何在 Sencha 中为饼图设置边框

【英文标题】：How to set border for a pie chart in Sencha

【发布时间】：2013-12-02 11:17:56

【问题描述】：

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

【参考方案1】：

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

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

鉴于所有这些，我们可以通过这种方式为docs pie chart example 添加边框：

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);

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