初探ExtJs一张图中最多可以显示多少个点
来源:互联网 发布:俄罗斯海军实力知乎 编辑:程序博客网 时间:2024/05/01 12:54
结论
1张ExtJS中图中,影响显示的因素有:图像的宽度(width),Y轴坐标标题的宽度(widthOfYTitle)有关,初步推测点数 count 的计算公式为:
count = (width - widthOfYTitle
另外,显示的点数与,一张图中画的线的数目、画的点是否是在同一垂线上、图像的X轴的范围没有关系。
需要注意的一点是: 空白点也会占用点的个数,即设置的点的值 为 false,这样在图上就不会显示这个点,但是设置的空白点也算在计算的count之内
为实现结论的测试,我编写的测试代码如下:
<html><head><title>test-max-amount-of-point</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="../ext-4.0.7-gpl/resources/css/ext-all.css"><script type="text/javascript" src="../ext-4.0.7-gpl/bootstrap.js"></script><script type="text/javascript">// test variablevar width = 200;var count = 140;var maxFieldY = 2;varfromDate = new Date(2013, 2, 8, 11, 0, 0);vartoDate = new Date(2013, 2, 10, 11, 10, 0);var minimum = 0;var chart = null;var store = null;var colors = [ "#FF0000", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"];function generateStore() {var coord = [];coord.push('x');for (var i = 0; i < maxFieldY; i++) {var yField = 'y';yField = yField + i;coord.push(yField);}if (store == null) {store = Ext.create('Ext.data.Store', {fields: coord});}// var count = (toDate.getTime() - fromDate.getTime()) / 1000;var data = [];for (var i = 0; i < count; i++) {var obj = {};var endObj = {};obj.x = new Date(fromDate.getTime() + 1000 * i);endObj.x = new Date(fromDate.getTime() + 1000 * (i+1));for (var j = 0; j < maxFieldY; j++) {var objKey = 'y' + j;obj[objKey] = minimum + i%10 + j*2;endObj[objKey] = obj[objKey];}data.push(obj);// data.push(endObj);}store.loadData(data);}Ext.onReady(function () {generateStore();var me = {renderTo: 'chart',width: width,height: 200,store: store,shadow: false,axes: [{type: 'Numeric',position: 'left',fields: ['y0'],grid: true,minimum: minimum,maximum: minimum + 15},{type: 'Time',position: 'bottom',fields: ['x'],grid: true,step: false,dateFormat: 'Y-m-d H:i:s',fromDate: fromDate,toDate: toDate}]};me.series = [];// 添加线条for (var i = 0; i < maxFieldY; i++) {var title = "";var yField = 'y';yField = yField + i;me.series.push({type: 'line',xField: 'x',yField: yField,title: title,showMarkers: false,axis: ['left', 'bottom'],style: {stroke: colors[i%10],'stroke-width': 0},tips: {trackMouse: true, width: 200, height: 35,layout: 'fit',renderer: function(storeItem, item) {var curDate = null;curDate = item.value[0];var formatDate = Ext.Date.format(curDate,'Y-m-d H:i:s');var value = item.value[1];this.setTitle('date: ' + formatDate +'<br>' +'value:' + value.toFixed(3));}}});}chart = Ext.create('Ext.chart.Chart', me);});</script></head><body> <div id="chart"></div></body></html>
上图为正常显示点的截图。
上图为改变时间范围并不影响图像显示的截图
上图为当数据数目过大时,图像不能显示的截图
关于Y轴坐标标题的宽度为影响因素的测试
数据量为 6*60+10 秒为单位的梯状数据图形中
[0, 15] 区间可以显示
[100, 115] 区间不显示图形
关于画的点是否是在同一垂线上为无关因素的测试
1 个 count 只对应于 1 个点的情况
count = (width - widthOfYTitle)
在最大Y轴标题数值为 13.12 时,经过几组数据比较,可以认为 widthOfYTitle 为59
测试 width: 400
count: 340; result: yes
count: 341; result: yes
count: 342; result: no
测试 width: 200
count: 140; result: yes
count: 141; result: yes
count: 142; result: no
1 个 count 只对应于 2 个点的情况
count = (width - widthOfYTitle) / 2
因为每个 count 创建了两个点,
所以实际公式应该修正为 count = (width - widthOfYTitle)
在最大Y轴标题数值为 13.12 时,经过几组数据比较,可以认为 widthOfYTitle 为60
测试 width: 400
count: 169; result: yes
count: 170; result: yes
count: 171; result: no
测试 width: 200
count: 69; result: yes
count: 70; result: yes
count: 71; result: no
关于多条线为无关因素的测试
在时间区间为 6*60+10 秒,
图像宽度设置为 800
Y 轴显示的数据范围 [0, 15]
1 条线的情况: 可以显示
10 条线的情况: 可以显示
20 :可以显示
- 初探ExtJs一张图中最多可以显示多少个点
- MongoDB 中最多可以使用多少个集合
- window一个文件夹中最多可以存储多少个文件
- Shell最多可以输入多少个参数?
- Shell最多可以输入多少个参数?
- 搜狗笔试题~求圆上的点最多可以组成多少个钝角三角形
- 一张表可以有多少个主键
- 一张表可以有多少个主键
- n个三角形最多可以构成多少个区域
- 测试一个表空间最多可以创建多少个文件
- 一个进程(Process)最多可以生成多少个线程(Thread)
- 一个进程(Process)最多可以生成多少个线程(Thread)
- 一个进程(Process)最多可以生成多少个线程(Thread)
- RS485总线最多可以负载多少个设备
- 一个try{}后最多可以有多少个catch()语句
- MySQL的一个表最多可以有多少个字段
- 百度笔试题:绳子最多覆盖多少个点
- 【LintCode】最多有多少个点在一条直线上
- Java编程排序-快速排序算法
- how to install rar and unrar in centos6.3
- HEW中文注释 设定缺省的工程路径
- Java跳出多重循环
- 怎样用三句话向一个 8 岁小孩解释什么是数据库?(整理来至知乎)
- 初探ExtJs一张图中最多可以显示多少个点
- SSE2指令--使用SSE2的整型内存操作和初始化:前言
- C# 数据集 DataRow.RowState 属性深入分析
- ASP.NET页面间的传值的几种方法
- 8天入门wpf—— 第四天 模板
- sybase 备份/恢复 出错!
- 【也许你们现在很相爱,但陪你到最后的也许不是你】
- 13_2多重继承
- SVN与Git比较