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”说：“你有 layout : 'fit' on the window，它将子项的大小调整为窗口的大小，所以你需要给窗口一个大小。”

这是真的。我已经添加了大小，它工作正常：

  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 的初始动画和更新动画并不相同，如果要确保有初始动画，则应按特定顺序创建 store 和 extension。首先，将 Ext.data.Store.autoLoad 选项设置为 false，使用 store 创建 Highcharts 组件，然后调用 Ext.data.Store.load 方法。initAnimAfterLoad 延迟在内部创建图表，直到加载存储。禁用它，扩展程序将立即创建图表，您只会在加载后看到更新动画。

这个商店参数也在控制台中提供更多信息

, debug: true


在同事的建议下解决了
这应该添加到商店中，这就像一个魅力

, autoLoad: true

谢谢你

于 2013-06-05T14:11:58.887 回答