Anychart图表系列六之滚动条

标签: anychart 图表 系列 | 发表时间:2013-09-16 18:06 | 作者:
出处:http://www.iteye.com

如果数据过多的时候,图表因为只有固定宽度,无法呈现较好的效果,这时候滚动条的作用就出来了,基于Flash格式的AnyChart支持图表内出滚动条(目前HTML5尚不支持)。

AnyChart水平和竖直方向均支持滚动条,以下是出滚动条的设置,<y_axis>中的<zoom>表示在y轴出滚动条,<x_axis>中的<zoom>表示在x轴出滚动条。

<axes>
  <scroll_bar_settings>
    <vert_scroll_bar>
    </vert_scroll_bar>
    <horz_scroll_bar>
    </horz_scroll_bar>
  </scroll_bar_settings>
  <y_axis>
    <zoom enabled="" show_scroll_bar="" start="" end="" visible_range="" visible_range_unit="">
    </zoom>
  </y_axis>
  <x_axis>
    <zoom />
  </x_axis>
</axes>

 

看下面这个例子,让X轴产生一个滚动条,滚动条默认从第一个point name开始,但是如果设置了start属性就表示滚动条会往中间移动一点位置,visible_range表示一个屏幕下显示多少个point name,下面设置的4,表示一个屏幕下会有4个point name显示。

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart>
      <chart_settings>
        <axes>
          <x_axis>
            <zoom enabled="true" inside="true" start="2.5" visible_range="4" />
          </x_axis>
        </axes>
      </chart_settings>
      <data>
        <series>
          <point name="Jan" y="2" />
          <point name="Feb" y="1" />
          <point name="Mar" y="3" />
          <point name="Apr" y="4" />
          <point name="May" y="4" />
          <point name="Jun" y="5" />
          <point name="Jul" y="6" />
          <point name="Aug" y="7" />
          <point name="Sep" y="6" />
          <point name="Oct" y="5" />
          <point name="Nov" y="8" />
          <point name="Dec" y="10" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>

最终效果图如下



 

 

同理,下面这段代码是在Y轴显示滚动条

<y_axis>
  <zoom enabled="true" inside="true" start="65" end="95" />
</y_axis>

 

 

 

滚动条设置功能本身很简单,但是我只能说AnyChart的滚动条功能并不智能,因为它必须让开发人员去设置什么时候出滚动条,滚动条出多大,所以如果用到大项目中的时候,开发人员还必须通过js判断页面宽度,再根据传入的值去动态创建滚动条(反正我是这么做的)。

希望AnyChart在新的版本能够支持设置图的最小间距(比如柱子的最小间距),如果超出最小间距则自动出滚动条。

AnyChart滚动条更多的文档参考以下地址: http://www.anychart.com/products/anychart/docs/users-guide/index.html?Zooming-And-Scrolling.html



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [anychart 图表 系列] 推荐:

Anychart图表系列六之滚动条

- - ITeye博客
如果数据过多的时候,图表因为只有固定宽度,无法呈现较好的效果,这时候滚动条的作用就出来了,基于Flash格式的AnyChart支持图表内出滚动条(目前HTML5尚不支持). AnyChart水平和竖直方向均支持滚动条,以下是出滚动条的设置,中的表示在y轴出滚动条,中的表示在x轴出滚动条.

两张图表诠释史上最大的电影系列

- - 译言-教育与学习
两张图表诠释史上最大的电影系列. 只有一件东西,好莱坞对其热爱程度超过一部热卖电影:一部可以反反复复拍摄的热卖电影. 话句话说,就是一部能衍生续集的电影. 不难明白为什么好莱坞渴望电影系列. 电影工作室都忙于制作能盈利的电影. 和其他行业一样,这意味着最小化风险—在这种情况下,排出一部烂片的风险. 从定义上来讲,续集就是电影工作室知道的、已经深受人们青睐的电影,不论是间谍,巫师,超级英雄…还是以上所有的.

[原]Lucene系列-facet

- - 文武天下
facet:面、切面、方面. 个人理解就是维度,在满足query的前提下,观察结果在各维度上的分布(一个维度下各子类的数目). 如jd上搜“手机”,得到4009个商品. 其中品牌、网络、价格就是商品的维度(facet),点击某个品牌或者网络,获取更细分的结果. 点击品牌小米,获得小米手机的结果,显示27个.

[原]Lucene系列-FieldCache

- - 文武天下
域缓存,加载所有文档中某个特定域的值到内存,便于随机存取该域值. 当用户需要访问各文档中某个域的值时,IndexSearcher.doc(docId)获得Document的所有域值,但访问速度比较慢,而且只能获得Stored域的值. FieldCache能获得域值数组,根据docId random access域值.

JavaScript 3D图表

- - 四火的唠叨
文章系本人原创,转载请保持完整性并注明出自 《四火的唠叨》. 在说3D图表以前,首先要明确两个概念,一个是数据的维度,一个是呈现数据载体的维度. 对于数据的维度,一维的数据呈现,但是呈现的载体是二维的平面图,比如饼图:. 已经能够很清晰地观察到数据的分布情况. 数据如果增加一个维度,变成二维,呈现载体依然是二维的平面图:.

Charts - 图表插件

- 天使羊 - 博客园-首页原创精华区
       Charts - 图表插件.        1)Highstock 可让你使用纯 JavaScript 创建股票或者通用的时间线图表.       2)Smoothie Charts是一个小型图表生成脚本,专为生成实时数据图表而设计. 比如可以用于生成CPU使用情况的图表.       3)JQuery Gantt Chart这是一款jQuery图表插件,可以实现甘特图.

google全系列hosts列表

- 佳 - cooerson的各种聚合
整理了一下Google(含google大部分服务,google+,gmail,地图,gtalk等~)的hosts. 可以通过添加hosts方式,享受谷歌产品,这样读图会快很多,gmail也能随时打开了,不会出现链接不上情况了,更不用番强了. windows下修改hosts文件,添加固定的DNS解析.

可爱的Pusheen猫系列

- apple - 鸸鹋动物园
全部都会动,全部都会哦~~ (via). 还有Pusheen猫的QQ表情. © Salala for 鸸鹋动物园, 2011. 转发本文地址 可爱的Pusheen猫系列 http://www.ermiao.com/gallery/20110901/21594.html. 本文标签:Pusheen, 猫, 表情.

This man is your FRIEND系列海报

- Edward - hUrR DuRr
Fallout: New Vegas乱入:. Team Fortress 2乱入:. reddit上真是什么奇葩的subreddit都有:r/PropagandaPosters.

Java Cache系列之Guava Cache

- - BlogJava-首页技术区
然而作为工具库中的一部分,我们自然不能期待Guava对Cache有比较完善的实现. 因而Guava中的Cache只能用于一些把Cache作为一种辅助设计的项目或者在项目的前期为了实现简单而引入. 在Guava CacheBuilder的注释中给定Guava Cache以下的需求:. 对于这样的需求,如果要我们自己来实现,我们应该怎么设计.