extjs6条形统计图和折线图的切换案例
时间: 2024-05-15 17:14:55 浏览: 17
以下是一个使用ExtJS 6实现条形统计图和折线图切换的简单案例:
1.首先,我们需要定义一个包含条形统计图和折线图的Panel:
```
Ext.define('MyApp.view.MyChartPanel', {
extend: 'Ext.panel.Panel',
xtype: 'mychartpanel',
requires: [
'Ext.chart.CartesianChart',
'Ext.chart.axis.Category',
'Ext.chart.axis.Numeric',
'Ext.chart.series.Bar',
'Ext.chart.series.Line'
],
layout: 'fit',
items: [{
xtype: 'cartesian',
reference: 'chart',
bind: '{chartData}',
insetPadding: {
top: 20,
bottom: 20,
left: 20,
right: 40
},
axes: [{
type: 'category',
fields: ['name'],
position: 'bottom',
label: {
rotate: {
degrees: -45
}
}
}, {
type: 'numeric',
fields: ['value'],
position: 'left',
grid: true
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value',
style: {
opacity: 0.80
},
highlight: {
fillStyle: 'yellow'
},
tooltip: {
trackMouse: true,
renderer: function (tooltip, record, item) {
tooltip.setHtml(record.get('name') + ': ' + record.get('value'));
}
}
}, {
type: 'line',
xField: 'name',
yField: 'value',
marker: {
type: 'circle',
radius: 4,
lineWidth: 2,
fillStyle: 'white'
},
style: {
lineWidth: 2
},
tooltip: {
trackMouse: true,
renderer: function (tooltip, record, item) {
tooltip.setHtml(record.get('name') + ': ' + record.get('value'));
}
}
}]
}],
tbar: [{
text: 'Switch to Bar Chart',
handler: 'onSwitchToBarChart'
}, {
text: 'Switch to Line Chart',
handler: 'onSwitchToLineChart'
}]
});
```
2.在控制器中,我们需要定义两个事件处理程序,用于切换到条形统计图和折线图:
```
Ext.define('MyApp.view.MyChartPanelController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mychartpanel',
onSwitchToBarChart: function () {
var chart = this.lookupReference('chart');
chart.getSeries()[0].setType('bar');
chart.getSeries()[1].hide();
},
onSwitchToLineChart: function () {
var chart = this.lookupReference('chart');
chart.getSeries()[0].setType('line');
chart.getSeries()[1].show();
}
});
```
在这里,我们使用getSeries()方法获取图表的两个系列,然后使用setType()方法将第一个系列切换为条形统计图或折线图,使用show()和hide()方法显示或隐藏第二个系列。
3.最后,我们需要定义一个包含示例数据的ViewModel:
```
Ext.define('MyApp.view.MyChartPanelModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.mychartpanel',
data: {
chartData: [{
name: 'Item 1',
value: 10
}, {
name: 'Item 2',
value: 7
}, {
name: 'Item 3',
value: 5
}, {
name: 'Item 4',
value: 2
}, {
name: 'Item 5',
value: 27
}]
}
});
```
4.最后,在应用程序中使用MyChartPanel:
```
Ext.application({
name: 'MyApp',
requires: ['MyApp.view.MyChartPanel'],
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'mychartpanel'
}]
});
}
});
```
现在,我们可以在条形统计图和折线图之间切换,如下所示:
![chart-switch.png](https://img-blog.csdn.net/20180816102650168?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhY2thZ2Vz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/85)
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)