0

我正在尝试将图表添加到面板。但是图表在渲染后立即消失（我可以看到它大约 1 秒）。标题仍然存在，但其他一切都消失了（包括传说）

Ext.define('MyProject.view.FoodDetail', {
    extend: 'Ext.panel.Panel',

  layout: {
        type: 'vbox',
        align: 'stretch'
    },

  items: [{
        flex: 1,
        xtype: 'panel',
        // width: '100%',
        height: 350,
        reference: 'pieContainer'
    }
  ]
})

然后在控制器中，我将饼图添加到 pieContainer 中（类似于 Kitchen Sink 示例）

setPie: function (myStore) {

  var chartContainer = this.lookupReference('pieContainer')
  chartContainer.add({
    xtype: 'polar',
    height: 350,
    store: arrayStore,
    insetPadding: 50,
    innerPadding: 20,
    reference: 'foodPieChart',
    legend: {
      docked: 'bottom'
    },
    interactions: ['rotate', 'itemhighlight'],
    sprites: [
      {
        type: 'text',
        text: 'Food composition',
        font: '22px Helvetica',
        width: 100,
        height: 30,
        x: 40, // the sprite x position
        y: 20 // the sprite y position
      }
    ],
    series: [{
      type: 'pie',
      angleField: 'amount',
      label: {
        field: 'category',
        display: 'outside',
        calloutLine: {
          length: 60,
          width: 3
            // specifying 'color' is also possible here
        }
      },
      highlight: true,
      tooltip: {
        trackMouse: true,
        renderer: function (storeItem, item) {
          this.setHtml(storeItem.get('category') + ': ' + storeItem.get('amount'))
        }
      }
    }]
  })
}

我尝试过使用 renderTo 和其他东西，但我似乎无法弄清楚发生了什么。

4

0 回答 0