//更改store的fields 、 axes的fields 和 chart的series
var storeFields = ['time'];
var axesFields = [];
var series = [];
for (var i = 0; i < rtus.hiddenValue.split(',').length; i++) {
storeFields.push('s' + i);
axesFields.push('s' + i);
series.push({
type : 'line',
highlight: false,
xField : 'time',
yField : 's' + i,
tips: {
trackMouse: true,
width: 65,
height: 40,
renderer: function(storeItem, item) {
var d = new Date();
d.setTime(storeItem.get('time'));
this.setTitle(Ext.Date.format(d, 'd日H时'));
this.update(storeItem.get('s' + i) + 'm');
}
},
style: {
fill: '#38B8BF',
stroke: '#38B8BF',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: '#38B8BF',
stroke: '#38B8BF'
}
});
}
var chart = mainPanel.down('chart');//chart
chart.getStore().fields = storeFields;
chart.axes.items[0].fields = axesFields;
chart.series = new Ext.util.MixedCollection(false, function(a) { return a.seriesId || (a.seriesId = Ext.id(null, 'ext-chart-series-')); });
if (series) {
chart.series.addAll(series);
}
//加载数据
chart.getStore().load({
params : {
rtuIds : rtus.hiddenValue.replace(/rtu_/g, ''),
beginTime : beginTime.getValue(),
endTime : endTime.getValue()
}
});
/*主要是这块:
chart.series = new Ext.util.MixedCollection(false, function(a) { return a.seriesId || (a.seriesId = Ext.id(null, 'ext-chart-series-')); });
if (series) {
chart.series.addAll(series);
}
刚开始用chart.series = series;
console里边查看chart的series里的items中老是Object类型 而不是所需要的constructor,
然后查看源码,发现是使用上边的MixedCollection*/
分享到:
相关推荐
在EXTJS中,折线图(line chart)是一种常见的图表类型,常用于展示趋势或时间序列数据。本篇文章将深入探讨EXTJS折线chart与action交互的代码示例,以及如何通过远程和本地加载数据。 首先,让我们了解EXTJS折线...
经过一周的时间终于做出来了,此文件代码主要的是实现动态切换 chart line ,tips 显示数据的饼状图和grids,难点在作用域的实现需要的有一定的js基础,(因开发的原因后台代码未上传,基于json的传输,SQL是...
其中,Chart组件是ExtJS 4中的一个重要部分,它提供了丰富的图表类型,包括曲线图,帮助开发者创建动态、交互式的数据展示。在这个“extjs 4chart”主题中,我们将深入探讨ExtJS 4中曲线图的实现与应用。 首先,让...
在本文中,我们将深入探讨如何在ExtJS4中利用Ajax数据源来绘制线形图表(Line chart)。ExtJS是一个强大的JavaScript库,专为构建富客户端应用程序而设计,它提供了丰富的图表组件,使得数据可视化变得简单易行。让...
在给定的"ExtJS 制作折线图"主题中,我们将深入探讨如何使用ExtJS 的lineChart组件来创建动态、交互式的折线图。 首先,让我们了解什么是折线图。折线图是一种统计图表,通过连接一系列数据点来显示数值的变化趋势...
在ExtJS中,使用`Ext.chart.Chart`和`Ext.chart.series.Line`系列配置可以创建折线图。你可以设置线的样式、点的标记,以及时间轴的格式化。以下是一个折线图的例子: ```javascript Ext.application({ name: 'App...
- **Line Chart**(折线图):用于展示趋势或连续数据,通过线条连接数据点,适合时间序列分析。 - **Column Chart**(柱状图):用于比较类别之间的值,每个类别占据一定宽度的矩形柱,高度表示值的大小。 3. **...
此包内还包括不同类型的图表,如`BarChart`、`ColumnChart`、`LineChart`和`PieChart`,它们分别代表条形图、柱状图、折线图和饼图。 `Ext.chart.Axis`是图表的坐标轴类,有如`hideOverlappingLabels`(隐藏重叠的...
虽然2.2版本的图表功能可能没有后续版本丰富,但仍然提供了基础的图表类,如`PieChart`、`BarChart`和`LineChart`,可以用于数据可视化。 6. **事件系统**: ExtJS的事件系统是其交互性的基础,允许组件间通信和...
在ExtJS中,我们可以通过`Ext.chart.Chart`类创建柱状图,并通过配置项来定制图表的各种特性,如颜色、标签、图例等。例如,我们需要定义`series`来指定数据系列,每个系列包含`type`(类型,这里是'column'),`...
- ExtJS的图表组件是基于Sencha Chart模块,它提供了一套完整的2D和3D图表类型,如线图、柱状图、饼图、散点图、雷达图等。 - 图表的基础元素包括系列(series)、轴(axes)、图例(legend)和提示(tooltip)等...
var chart = Ext.create('Ext.chart.Chart', { width: 800, height: 600, renderTo: Ext.getBody(), theme: 'Category1', store: myStore, // 数据存储 series: [ // 定义多个系列,每个系列对应一条折线 { ...
Ext用户扩展控件——Google Chart,是一种将Google的图表服务与EXTJS框架相结合的技术,用于在Web应用中创建丰富的、动态的数据可视化效果。EXTJS是一个强大的JavaScript库,它提供了丰富的用户界面组件,而Google ...
//图表数据 Ext.onReady(function(){ //使用当前服务器的文件,如果没有这句话,默认会去adobe的站点取 Ext.chart.Chart.CHART_URL = ‘extjs/resources/charts.swf’; var json_reader = new Ext.data.JsonReader( ...
- `chartcomponents`: `chart`, `barchart`, `cartesianchart`, `columnchart`, `linechart` ##### xtype的使用场景 `xtype`在创建组件时作为配置参数传递,例如: ```javascript var button = new Ext.Button({ ...
本实例主要讲解如何利用EXTJS4的图表功能来实现动态数据的折线图展示,包括从后端获取数据并展示在图表上,以及查询每年各个月份的人数。 首先,我们定义一个名为`ChartLineTest`的类,它继承自`Ext.panel.Panel`,...
4. **渲染图表**:配置完成后,使用Highcharts的`Highcharts.chart`方法将配置对象转换为实际的图表,并将其渲染到EXTJS组件的DOM元素中。这通常在EXTJS组件的`onRender`或`afterRender`生命周期方法中完成。 5. **...
1. **多样的图表类型**:EJSChart支持多种图表类型,包括但不限于折线图(Line Chart)、柱状图(Bar Chart)、饼图(Pie Chart)、散点图(Scatter Plot)以及组合图表。这些图表能够满足不同数据类型的展示需求,...
对于折线图,我们同样使用`Ext.chart.Chart`,但设置`series.type`为'line'。饼状图则需要设置`series.type`为'pie',并指定`donut`属性来控制饼图的内径大小。 在处理数据时,EXT4.0支持多种数据源,可以是JSON...