0

私は Highcharts プラグインを使用しようとしていますが、彼のドキュメントの簡単な例から始めました。環境を正しく設定しました (確信しています)。これは私が宣言したウィンドウです:

//other part of app.js (working)
launch:function():{
var sto = Ext.create('AM.store.mysto');
var win = new Ext.create('Ext.window.Window', {
    layout: 'fit',
    items: [{
       xtype: 'highchart',
       series:[{
          dashStyle: 'DashDot',
          dataIndex: 'value'
       }],
       xField: 'month',
       store: sto,
       chartConfig: {
          chart: {
             type: 'spline'
          },
          title: {
             text: 'A simple graph'
          }
       }
    }]
}).show();
//other part of app.js (working)
}
//........more other part of app.js (working)

そして、ストアを次のように宣言しました。

Ext.define('AM.store.mysto', {
  extend : 'Ext.data.Store',
  model : 'AM.model.mysto',
  data : [{
    month : 'x',
    value:1
  }, {
    month : 'y',
    value:12,

    value:2
  }, {
    month : 'z',
    value:3
  }]
});

そして最後に、これは私のモデルです:

Ext.define('AM.model.mysto', {
  extend : 'Ext.data.Model',
  fields : [{
    name : 'month'
  }, {
    name : 'value'
  }]
});

アプリケーションを実行すると、これがウィンドウになります。つまり、内部にチャートがない空のウィンドウです。

窓

ドキュメントの例との唯一の違いは、ストアです。誰かが何が悪いのか教えてもらえますか? ありがとう！

4

2 に答える 2

0

Sencha の第一人者 "mitchellsimoens" は次のように述べています。

それは本当です。サイズを追加しましたが、正常に動作します：

  var win = new Ext.create('Ext.window.Window', {
    layout: 'fit',

//HERE!!!!
      width: 200,
      height: 200,

    items: [{
于 2013-03-21T10:35:35.053 に答える
0

問題は実際にはウィンドウのサイズではありません。問題は、
ウィンドウが空で、内部にチャートが
ない場合、同じ問題が発生することです。

元の例では、ストアがロードされておらず、ストアでの自動ロードでさえあなたのケースではありません

, autoLoad: true

ストアがデータをロードした後にのみウィンドウを作成するか、ウィンドウの作成後にストアをリロードする必要
があるため、このようにします

var chartStore = Ext.create('chartStore'); 
chartStore.load({

    callback: function (data, operation, success) {

        // here the store is loaded with data already 
        var winChart = new Ext.create('Ext.window.Window', {
            width: 400 
            , height: 400
            , layout: 'fit' 
            items: [{
                xtype: 'highchart' 
                , series: [{
    }

さらに、これもアイデアになる可能性があります Chart.ux.Highcharts >>> initAnimAfterLoad

Highcharts の初期アニメーションと更新アニメーションは同じではないため、初期アニメーションがあることを確認したい場合は、ストアと拡張機能を特定の順序で作成する必要があります。まず、Ext.data.Store.autoLoad オプションを false に設定し、ストアで Highcharts コンポーネントを作成してから、Ext.data.Store.load メソッドを呼び出します。initAnimAfterLoad は、ストアが読み込まれるまで内部的にチャートの作成を延期します。無効にすると、拡張機能によってチャートが即座に作成され、ロード後にのみ更新アニメーションが表示されます。

また、このストア パラメータは、コンソールで詳細情報を提供します

, debug: true


同僚のアドバイスで解決し
ました。これはストアに追加する必要があり、魅力のように機能します

, autoLoad: true

ありがとうございました

于 2013-06-05T14:11:58.887 に答える