Question

我正在尝试使用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'
  }]
});

如果我执行我的应用程序，这将是我的窗口：一个没有图表的空窗口。

the window

我与doc示例的唯一区别是商店。谁能告诉我有什么问题？谢谢！

Answer 1

Sencha“mitchellsimoens”的大师说： “你有一个布局：'适合'在窗口上，它会根据窗口的大小调整子项目的大小，因此你需要给窗口一个大小。”

这是真的。我添加了尺寸，它工作正常：

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

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

    items: [{

Answer 2

问题实际上不是窗口大小，
问题是 - 窗口空了，里面没有图表顺便提出同样的问题

在原始示例中，商店未加载，甚至商店中的自动加载也不适合您

, 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＆gt;＆gt;＆gt; initAnimAfterLoad

由于Highcharts的初始动画和更新动画不一样，如果你想确保有初始动画，那么你应该按特定顺序创建存储和扩展。首先，将Ext.data.Store.autoLoad选项设置为false，使用存储创建Highcharts组件，然后调用Ext.data.Store.load方法。 initAnimAfterLoad推迟在内部创建图表，直到加载商店。禁用它，扩展程序将立即创建图表，您只能在加载后看到更新动画。

此商店参数在控制台中提供更多信息

, debug: true

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

, autoLoad: true

谢谢

Chart.ux.Highcharts如何使用简单的商店

2 个答案: