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

【问题标题】：Chart.ux.Highcharts how to get work with simple storeChart.ux.Highcharts 如何使用简单商店
【发布时间】：2013-03-04 10:00:46
【问题描述】：

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

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

我与文档示例的唯一区别是商店。有人可以告诉我有什么问题吗？谢谢！

【问题讨论】：

标签： extjs charts extjs4 highcharts store

【解决方案1】：

煎茶大师“mitchellsimoens”说： “您在窗口上有布局：'适合'，它将子项的大小调整为窗口的大小，因此您需要给窗口一个大小。”

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

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

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

    items: [{

【讨论】：

【解决方案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 >>> initAnimAfterLoad

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

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

, debug: true

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

, autoLoad: true

谢谢你

【讨论】：