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 に追加します (キッチン シンクの例と同様)。

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