EXTJS生成条形图

时间:2012-05-18 14:50:39

标签: javascript extjs extjs4 extjs-mvc

我正在研究extjs&我想从xml制作一个条形图 这是我的XML

http://pastebin.ca/2150257

我做了这样的网格

columns: [
{text: "Department Performance", flex: 1,dataIndex: 'DepartmentPerformance', sortable: true},
{text : 'Domestic',
columns: [
{text: "YTD", width: 50, dataIndex: 'DomesticYTD', sortable: true},
{text: "MTD", width: 50, dataIndex: 'DomesticMTD', sortable: true},
{text: "Daily", width: 50, dataIndex: 'DomesticDaily', sortable: true}
]},
{text : 'Other',
columns: [
{text: "YTD", width: 50, dataIndex: 'OtherYTD', sortable: true},
{text: "MTD", width: 50, dataIndex: 'OtherMTD', sortable: true},
{text: "Daily", width: 50, dataIndex: 'OtherDaily', sortable: true},
]},
{text : 'Total',
columns: [
{text: "YTD", width: 50, dataIndex: 'TotalYTD', sortable: true},
{text: "MTD", width: 50, dataIndex: 'TotalMTD', sortable: true},
{text: "Daily", width: 50, dataIndex: 'TotalDaily', sortable: true},
]},

{text : 'OEM',
columns: [
{text: "YTD", width: 50, dataIndex: 'OEMYTD', sortable: true},
{text: "MTD", width: 50, dataIndex: 'OEMMTD', sortable: true},
]},

],

&安培;我想逐行制作一个图形点击行我不知道如何使用听众和&制作柱形图

像X轴3部分一样国内和国外其他&总计,在每个部分YTD,MTD,DAILY &安培; Y轴仅值0到最大值

我尝试了很多但不能按行值创建

请帮助................. 感谢

1 个答案:

答案 0 :(得分:0)

要在网格点击事件上生成图表,我们使用listener selectionchange事件 在选择更改时生成分配给条形图的新商店

selectionchange: function (view, selections, options) {
                          //console.log(view, selections, options);
                          record = selections[0];
                          //var v = record.get('Field1');
                          //alert(''+v);
                          //alert(''+index)
                         // alert('hiiii')


                        record = selections[0];

                        myData=[['Domestic',record.get('field1'),record.get('field2'),record.get('field3')],
                                     ['Export',record.get('field4'),record.get('field5'),record.get('field6')],
                                     ['Other',record.get('field7'),record.get('field8'),record.get('field8'),
                                     ]]

                        }

以下是示例演示链接.....

http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/FormDashboard.html

...谢谢