数据可视化-EChart2.0.0使用中遇到的2个问题
2015-01-22 14:00
771 查看
之前项目中都是使用FusionChart和HighChart,基本都是没有购买商业许可。然后现在开发的系统需要交付给客户使用。所以现在图表控件不能直接使用FusionChart和HighChart,通过对比EChart和D3.js,EChart由百度开发,相关的中文文档和问题应该会更好。而且D3.js代码配置和选项相对于EChart也要复杂,所以团队最后决定在图表类库采用EChart。
1.漏斗图,左右斜边不是一条直线
产生原因:
http://echarts.baidu.com/doc/example/funnel1.html 页面给出漏斗图的展现如下所示:
首先漏斗图对数据本身有一定的需求。因为是一个漏斗展现形式,所以最上一层的数据应该比下面一层的数据,然后每层数据都有一个递减的趋势。要不然算不上漏斗图。百度给出EChart的漏斗,看起来确实一个漏斗图,但是它对数据要求的非常严格。基本在商业应用中基本用不了。我在这个页面修改一下数据,修改配置参数配置如下:
{value: 100, name: '展现'},
{value: 90, name: '点击'},
{value: 60, name: '访问'},
{value: 50, name: '咨询'},
{value: 20, name: '订单'}
现在数据不是非常的规整,但是数据还是遵循了从最上一级往下减少的规律。但是呈现出来的漏斗图,现在估计都不敢叫漏斗图,完全变形了。所以这个漏斗图实际在开发过程中是无法使用,用户应该也接受不了这种漏斗图。
效果如下:
其他类库:FusionChart,参考网址:http://www.fusioncharts.com/charts/funnel-chart 效果如下所示:
不管开发者如何修改数据,FusionChart始终保持左右两边斜线是一条直线,它主要是通过改变层的高度来实现的。
解决办法:然后我在github上向百度EChart提出了这个issue,但是好像目前他们也没有修复的打算。所以目前还没有很好的版本,而且在新版本中这个问题会不会解决还不知道。百度kener给出的答复:https://github.com/ecomfe/echarts/issues/807
2.地图2.1.10中地图hover时,值域选择最大值出现数字重叠。
效果如下:
百度EChart给出了解决方法:https://github.com/ecomfe/echarts/issues/1188
项目之前使用的是2.0.0版本,如果只有一条记录,因为我们为了地图的颜色看起来更好看,对值域选择设置了最小值和最大值。考虑到浮点数,最大值值数据里面最大值向上取整,使用Math.ceil();最小值是数据里面最小值向下取整。Math.Floor()方法。但是在2.0.0版本中,EChart有个bug,这个点不会在地图上显示出来。在2.1.10中解决了这个问题。也提醒使用EChart的开发者,需要经常关注EChart官网对EChart的更新。我们当时使用的是2.0.0的版本,现在已经更新到2.1.10版本了。
同时大家可以关注修改记录。http://echarts.baidu.com/doc/changelog.html
参考网址:
1.百度 http://echarts.baidu.com/
2.D3.js http://d3js.org/
ps:本篇博客由有道云笔记编辑,然后复制到博客园发布。
1.漏斗图,左右斜边不是一条直线
产生原因:
http://echarts.baidu.com/doc/example/funnel1.html 页面给出漏斗图的展现如下所示:
首先漏斗图对数据本身有一定的需求。因为是一个漏斗展现形式,所以最上一层的数据应该比下面一层的数据,然后每层数据都有一个递减的趋势。要不然算不上漏斗图。百度给出EChart的漏斗,看起来确实一个漏斗图,但是它对数据要求的非常严格。基本在商业应用中基本用不了。我在这个页面修改一下数据,修改配置参数配置如下:
{value: 100, name: '展现'},
{value: 90, name: '点击'},
{value: 60, name: '访问'},
{value: 50, name: '咨询'},
{value: 20, name: '订单'}
现在数据不是非常的规整,但是数据还是遵循了从最上一级往下减少的规律。但是呈现出来的漏斗图,现在估计都不敢叫漏斗图,完全变形了。所以这个漏斗图实际在开发过程中是无法使用,用户应该也接受不了这种漏斗图。
效果如下:
其他类库:FusionChart,参考网址:http://www.fusioncharts.com/charts/funnel-chart 效果如下所示:
不管开发者如何修改数据,FusionChart始终保持左右两边斜线是一条直线,它主要是通过改变层的高度来实现的。
解决办法:然后我在github上向百度EChart提出了这个issue,但是好像目前他们也没有修复的打算。所以目前还没有很好的版本,而且在新版本中这个问题会不会解决还不知道。百度kener给出的答复:https://github.com/ecomfe/echarts/issues/807
2.地图2.1.10中地图hover时,值域选择最大值出现数字重叠。
效果如下:
百度EChart给出了解决方法:https://github.com/ecomfe/echarts/issues/1188
项目之前使用的是2.0.0版本,如果只有一条记录,因为我们为了地图的颜色看起来更好看,对值域选择设置了最小值和最大值。考虑到浮点数,最大值值数据里面最大值向上取整,使用Math.ceil();最小值是数据里面最小值向下取整。Math.Floor()方法。但是在2.0.0版本中,EChart有个bug,这个点不会在地图上显示出来。在2.1.10中解决了这个问题。也提醒使用EChart的开发者,需要经常关注EChart官网对EChart的更新。我们当时使用的是2.0.0的版本,现在已经更新到2.1.10版本了。
同时大家可以关注修改记录。http://echarts.baidu.com/doc/changelog.html
参考网址:
1.百度 http://echarts.baidu.com/
2.D3.js http://d3js.org/
ps:本篇博客由有道云笔记编辑,然后复制到博客园发布。
相关文章推荐
- 初学Flex,在使用Webservice时遇到Xml数据绑定的一个问题,试了N个方案,均没解决。
- 开发时遇到使用LINQ无法进行数据插入时的问题
- 数据可视化-EChart2.0使用总结2
- 使用Bootstrap Tabs选项卡Ajax加载数据的实现以及遇到的问题;
- Chrome 下,重复使用 XMLHttpRequest进行Post数据时,遇到一个奇怪的问题
- 数据绑定控件和XmlDataSource控件结合使用,通过后台绑定Xml数据片段遇到的问题
- zTree3.5使用ajax请求返回json数据时遇到的问题
- 使用CURL断点续传时遇到的数据类型问题
- 使用HttpClient的post提交数据遇到的问题
- 使用反射为泛型集合添加其他类型的数据时遇到的问题
- 使用ADO.net 实体数据模型遇到的问题
- 使用EditCommandColumn更新数据遇到的问题
- 使用GetDIBits获取图片数据时遇到的问题
- 初学Entity Framework 6.0 与 MySQL共同使用遇到的2个问题
- hive建表没使用LZO存储格式,但是数据是LZO格式时遇到的问题
- VS2008下使用Linq To Entity的Skip().Take()分页查询时遇到数据结果不对的问题
- 使用MySQL保存中文数据时,经常会遇到乱码问题的解决思路
- 使用XStream序列化、反序列化XML数据时遇到的各种问题
- [Phonegap+Sencha Touch] 移动开发54 初次使用Android Studio遇到的2个问题
- hadoop使用pig进行数据分析时遇到的问题(10020号端口问题,连接拒绝)