extjs 如何在Ext.js中通过单击图表上的按钮来更改图表的宽度？

vjhs03f7 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(169)

我在图表中添加了两个按钮：'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>

extjs

来源：https://stackoverflow.com/questions/64290234/how-to-change-the-width-of-the-chart-in-ext-js-by-clicking-a-button-on-it

1条答案

按热度按时间

chhqkbe11#

<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>

赞(0）回复(0）举报 2022-11-05

我来回答

extjs 如何在Ext.js中通过单击图表上的按钮来更改图表的宽度？

1条答案

相关问题

热门标签

最新问答