سؤال

I am attempting to follow this example for creating a pie chart but my chart does not display labels for the sections. I copied and used the exact code from the example linked above.

The chart display complete with color sections but there are no labels like in the example.

My code is pasted below:

    Ext.define('RevivalTimes.view.Chart', {
        extend: 'Ext.chart.PolarChart',
        xtype: 'chart',

        requires: [
            'Ext.chart.series.Pie',
            'Ext.chart.interactions.Rotate'
        ],

        config: {
            title: 'Statistics',
            iconCls: 'settings',

            layout: 'fit',

            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
            }]

        } //config
    });
هل كانت مفيدة؟

المحلول

The labels show with the inclusion of labelField as shown in the code below:

series: [{
    type: 'pie',
    label: {
        field: 'name',
        display: 'rotate'
    },
    xField: 'data1',
    donut: 30,

    labelField: 'name',
    showInLegend: true,
}],
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top