ExtJS 折线图趟过的坑

问题:

1、根据条件检索后绘制折线图,之前的坐标没有清除如图

解决方案:

在绘制之前,清空坐票:

leftLine.surface.removeAll();

leftLine.redraw(false);

完整代码如下

   storeBar.load({
                params: { SDate: bTime, EDate: eTime, ResourceId: resourceid },
                callback: function (records, operation, success) {
                    var axesItem = leftLine.axes.items;
                    axesItem[0].maximum = records[0].data.MaxNum;
                    axesItem[0].majorTickSteps = 4;
                    leftLine.surface.removeAll();
                    leftLine.redraw(false);
                }
            });

2、坐标数量很大时,横坐标数据覆盖

解决方法:

数据实体添加一个专门用来显示的列,根据自己的算法把不需要显示的坐标名称设置为空,处理后效果如下

时间: 2025-02-01 06:47:07

ExtJS 折线图趟过的坑的相关文章

echarts自定义折线图横坐标时间间隔踩坑总结

折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryGap: false, // 距离坐标原点是否有间隙 axisLabel: { //  如果这个字段不设置,echarts会根据屏宽及横坐标数据自动给出间隔 interval: 30, // 间隔长度,可自定义(如果是时间格式,echarts会自动处理) rotate: 40 // 横坐标上label

【ExtJs】折线图

ExtJs在ExtJs4之后,包含4则推出了图表功能,虽然图表功能可以通过其余JQuery插件实现,例如<[jQuery]兼容IE6的图表插件Highcharts>(点击打开链接),但是这个ExtJs的图表插件也很优秀,至少一些常见的图表也是不虚的. 一.基本目标 画出如下的折现图: 二.制作过程 首先,ExtJs绘制图表的项目,与<[ExtJs]与后台数据库交互的带分页表格组件grid的查询>(点击打开链接)同样,要先定义一个数据实体. Ext.define('graphData

用canvas绘制折线图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用canvas绘制折线图</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 </body> 1

iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 滑动两个中间点,贝塞尔曲线的形状会发生变化. UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 . 椭圆 或者 直线和曲线的组合形状 初始化方法: + (instancetype)bezierPath; /

Python中使用matplotlib 如何绘制折线图?

本文和大家分享的主要是python开发中matplotlib 绘制折线图相关内容,一起来看看吧,希望对大家学习和使用这部分内容有所帮助. matplotlib 1.安装matplotlib ① linux系统安装 # 安装matplotlib模块 $ sudo apt-get install python3-matplotlib# 如果是python2.7 执行如下命令 $ sudo apt-get install python-matplotlib# 如果你安装较新的Python,安装模块一乐

自定义view—折线图

学习导航 第一节:http://blog.csdn.net/bobo8945510/article/details/53197727 -自定义View-自定义属性及引用 第二节:http://blog.csdn.net/bobo8945510/article/details/53203233 自定义view02-图形绘制 第三节:http://blog.csdn.net/bobo8945510/article/details/53213938 自定义View-绘图基础之Path 第四节:http

手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍

因为项目需要搞一个折线图,按照日期显示相应的成绩,所以有了本文. 以前用过一次XCL-chart,但是感觉只适合固定图表,不去滑动的那种,因为你一滑动太卡了你懂得(毕竟作者好久没更新优化了),拙言大神我开玩笑的 ,毕竟我加你的群大半年了 - - 第二研究了一下achartenginee图表框架,一不美观,二 achartenginee的可定制性实在不敢恭维,做出来的图表根本不能满足需求 再试了一次网传最好用的MPchart和hellochart同一年出来的,但是要比hellochaet早点.说实

折线图 饼状图 柱状图

xaml 文件 <Window x:Class="Supplier.TrendCharts" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="产品价格趋势图" Height="500" Width

慕课网实战—《用组件方式开发 Web App全站 》笔记五-折线图组件开发

运用HTML5.CSS3.JS流行技术,采用组件式开发模式,开发Web App全站!技术大牛带你统统拿下不同类型的HTML5动态数据报告! <用组件方式开发 Web App全站 > 折现图绘制大致步骤 折线图画布 JavaScript CSS 折线图绘制网格线 // 水平网格线 100份 -> 10份 var step = 10; ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = '#AAAAAA'; window.ctx = c