Extjs 4.2 带动态数据的分组条形图答案

【问题标题】：Extjs 4.2 grouped bar chart with dynamic dataExtjs 4.2 带动态数据的分组条形图
【发布时间】：2017-07-12 08:57:58
【问题描述】：

我正在尝试使用动态数据生成图表。

型号

Ext.define('App.mdlGraficaDE', {
    extend: 'Ext.data.Model',
    fields: [
    ]   
});

商店

Ext.define('App.strGraficaDE', {
    extend: 'Ext.data.Store',
    model:  'App.mdlGraficaDE',
    autoLoad: false,
    proxy: {
        type: 'ajax', 
        api: {
            read: './data/php/Tmc_GraficaDE.php'
        },
        reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'total'
        }
    }
});

视图中的图表对象

var almacenGraficaDE = Ext.create('App.strGraficaDE');
var graficaDE = Ext.create('Ext.chart.Chart',{
    style: 'background:#fff',
    itemId:'graficaDE',
    margin:'10 10 10 10',
    animate: true,
    shadow: true,
    store: almacenGraficaDE,
    legend: {
        position: 'right'
    },
    axes:[
          {
              type:'Category',
              position:'bottom',
              fields:['Referencia'],
              title: 'Referencia'
          },
          {
              type:'Numeric',
              position:'left',
              fields:[],
              minimum:0,
              grid:true,
              title:'Precio Unitario'
          }
    ],
    series:[
            {
                type: 'column',
                axis: 'bottom',
                xField:'',
                yfield:[]
            }
    ]
});

我想获得类似下一张图片的东西：

但我不知道我必须以什么方式从 php 返回数据，以及是否需要在 store.load 操作的回调部分进行一些配置，以使用接收到的数据配置图表的轴和系列.

【问题讨论】：

标签： javascript php extjs4.2

【解决方案1】：

无法制作如图所示的分组图表，而是 Extjs 提供了堆叠条形图，我认为它可以满足您的要求
对于 php 中的数据，只需在下面的小提琴中获取数据并管理轴并存储字段
Try this fiddle

【讨论】：