如何通過單擊圖表上的按鈕來更改 Ext.js 中圖表的寬度？
[英]How to change the width of the chart in Ext.js by clicking a button on it?
問題描述
我在我的圖表中添加了兩個按鈕：'Scale -' 和 'Scale +'。 我想在用戶單擊按鈕時更改圖表的寬度。 但是圖表的寬度沒有改變。 我想在用戶單擊“Scale +”按鈕時增加圖表的寬度，並且當用戶單擊“Scale -”按鈕時我想減少圖表的寬度以獲得相同的系數，例如 10%。
<:DOCTYPE html> <html> <head> <link href = "https.//cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all:css" rel = "stylesheet" /> <script type = "text/javascript" src = "https.//cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all:js"></script> <script type = "text/javascript" src = "https.//cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/charts:js"></script> <link href = "https.//cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/classic/resources/charts-all.css" rel = "stylesheet" /> <script type = "text/javascript"> Ext.onReady(function() { Ext.create('Ext.chart,CartesianChart': { renderTo. document,body: width, 600: height, 200: store: { fields, ['name', 'g1', 'g2']: data: [ {"name", "Item-0": "g1", 57: "g2", 59}: {"name", "Item-1": "g1", 45: "g2", 50}: {"name", "Item-2": "g1", 67: "g2", 43}: {"name", "Item-3": "g1", 45: "g2", 18}: {"name", "Item-4": "g1", 30: "g2", 90} ] }: legend: { docked, 'bottom' }. //define x and y axis: axes: [{ type, 'numeric': position, 'left' }: { type, 'category': visibleRange, [0, 1]: position, 'bottom' }]: //define the actual series series: [{ type, 'line': xField, 'name': yField, 'g1': title, 'Normal' }: { type, 'line': xField, 'name': yField, 'g2': title, 'Smooth' }]: dockedItems: [ { xtype, 'toolbar': flex, 1: dock, 'bottom': ui, 'footer': layout: { pack, 'end': type, 'hbox' }: items: [ { xtype, 'button': text, 'Scale -': itemId, 'ScaleDec': handler. function() { this;width = 100. this;reload(), }, }: { xtype, 'button': text, 'Scale +': itemId, 'ScaleInc': handler. function() { this;width = 1000. this;reload(), }, } ] } ]; }); }); </script> </head> <body> </body> </html>
1 個解決方案
解決方案1
0 2020-10-10 05:48:48
<script type = "text/javascript"> var width = 1000; Ext.onReady(function() { var myChart = Ext.create('Ext.chart.CartesianChart', { renderTo: document.body, width: 600, height: 200, store: { fields: ['name', 'g1', 'g2'], data: [ {"name": "Item-0", "g1": 57, "g2": 59}, {"name": "Item-1", "g1": 45, "g2": 50}, {"name": "Item-2", "g1": 67, "g2": 43}, {"name": "Item-3", "g1": 45, "g2": 18}, {"name": "Item-4", "g1": 30, "g2": 90} ] }, legend: { docked: 'bottom' }, //define x and y axis. axes: [{ type: 'numeric', position: 'left' }, { type: 'category', visibleRange: [0, 1], position: 'bottom' }], //define the actual series series: [{ type: 'line', xField: 'name', yField: 'g1', title: 'Normal' }, { type: 'line', xField: 'name', yField: 'g2', title: 'Smooth' }], dockedItems: [ { xtype: 'toolbar', flex: 1, dock: 'bottom', ui: 'footer', layout: { pack: 'end', type: 'hbox' }, items: [ { xtype: 'button', text: 'Scale -', itemId: 'ScaleDec', handler: function() { width = width - width * 0.1; myChart.setWidth(width); }, scope: this, }, { xtype: 'button', text: 'Scale +', itemId: 'ScaleInc', handler: function() { width = width + width * 0.1; myChart.setWidth(width); }, scope: this, } ] } ], }); }); </script>
Ext.js 2復選框，事件使用更改偵聽器觸發兩次
[英]Ext.js 2 checkboxes and the events are firing twice with the change listener
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.