Need help with acharts?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

acharts
198 Stars 65 Forks MIT License 83 Commits 20 Opened issues

Description

Acharts is a javascript charts,Using Raphael as a foundation.

Services available

!
?

Need anything else?

Contributors list

acharts spm version


Acharts is a javascript charts,using svg and vml,Using Raphael as a foundation.


links

答疑

  • 旺旺群:1467247830
  • qq群:361974463
  • 邮箱: [email protected]
  • issues : https://github.com/acharts/acharts/issues

Usage

  1. 引入cdn上的代码
    
  1. 使用,引入acharts文件后,会在window上增加Chart变量代表Chart控件类
  var chart = new AChart({
    //configs
  });
  // use acharts

图表的属性

  • id 图表渲染到的容器的id,必须
  • width 图表的宽度,如果设置forceFit :true,则自动计算宽度
  • height 图表的高度
  • data 图表的数据,如果此属性设置,series内部就不需要设置data
  • forceFit 图表宽度自适应,窗口发生改变时,图表宽度自适应
  • fitRatio 如果设置了forceFit 那么宽高的比例由此属性决定,默认0,不按照比例设置高度
  • plotCfg 图表的边框、背景设置,详细信息参考:图表背景wiki
  • title 图表标题,设置null时不显示,是一个文本图形,配置信息参考:文本
  • subTitle 图表子标题,设置null时不显示,是一个文本图形,配置信息参考:文本
  • xAxis x轴坐标,对应 Axis类,更多坐标轴文档
    • type 标示坐标轴类型会转换成对应的坐标轴,例如 Axis.Number 对应 type : 'number';Axis.Circle 对应 type : 'circle'
    • 其他配置信息是指定类型坐标轴的配置信息
  • yAxis y轴坐标,配置信息类似于 xAxis,特别之处在于:
    • yAxis可以是数组,标示图表有多个y坐标轴,对应的图表序列 series里面配置 yAxis:1,即可
  • yTickCounts y轴坐标轴的坐标点的个数,决定显示的文本和栅格密度,这个值是一个数组类型,指定最小、最大个数,默认 : [3,5]
  • xTickCounts x轴坐标轴的坐标个数,也是有个数组 ,默认 [5,10]
  • colors 颜色列表,多个图表序列时,每个图表序列的颜色依次自动赋值
  • tooltip 提示信息,详细信息参考tooltip
  • legend 图例,详细信息参考图例
  • series 图表序列的配置信息,是一个数组,每个对象代表一个图表序列,详细信息参考图表序列,详细文档,更多图表序列

    • type 标示图表序列的类型,例如 type : 'line' 代表 Series.Line; type : 'column' 代表Series.Column
    • 其他配置信息参考 对应的数据类型
  • seriesOptions 图表序列统一的配置信息,多个同样的图表序列的配置信息可以一起配置

    • 每种图表一种配置信息,例如 lineCfg 标示折线图 type : 'line' 的配置信息,columnCfg 标示柱状图的配置信息
    • 如果仅有一种类型的配置信息,例如 seriesOptions : {columnCfg : {}},默认所有series的类型为 column
  • theme 图表的皮肤,详细信息参考图表皮肤

只读属性

  • canvas 画布,详细信息参考画布

方法

  • render() 渲染图表
  • on(eventName,fn) 绑定事件
  • off(eventName,fn) 解除事件绑定
  • get(name) 获取属性
  • set(name,value) 设置属性

  • getSeries() 返回所有的series

  • getSeriesByName(name) 获取指定名称的series

  • getXAxis(seriesName) 根据序列series的name返回对应的x坐标轴,如果不指定则取第一个序列的x坐标轴

  • getYAxis(seriesName) 根据序列series的name返回对应的y坐标轴,如果不指定则取第一个序列的y坐标轴

  • changeData(data) 更改数据,如果有多个序列则 data 是一个多维数组,data = [data1,data2...datan]

绑定事件

  • 图表的事件绑定方式有多种方式:
    • 直接在chart上绑定图表的事件,事件类型比较少,必须在图表上触发事件
    • 配置项中配置对应元素的事件,例如可以在具体的某个 series里面配置series的事件
    • 查找到对应的图形或者分组,绑定事件

直接在图表上绑定事件

  • 图表支持的事件类型:

    • plotclick 图表边框内部的点击事件
      • ev.x 点击的x坐标
      • ev.y 点击的y坐标
      • ev.shape 点击的图形
    • plotmove 图表边框内部的移动事件
      • ev.x 移动到的x坐标
      • ev.y 移动到的y坐标
      • ev.shape 移动到的图形
    • plotover 进入图表的边框内部
      • ev.x 进入的x坐标
      • ev.y 进入的y坐标
      • ev.shape 移动到的图形
    • plotout 移出图表边框
    • seriesactived 图表序列激活,例如折线图激活
      • ev.series 图表序列
    • seriesunactived 图表序列取消激活
      • ev.series 图表序列
    • seriesitemclick 点击图表序列子项,例如饼图的一个子项(弧形)被点击
      • ev.series 图表序列
      • ev.seriesItem 图表序列子项
    • seriesitemselected 选中图表序列的一个子项,例如柱状图的一项被选中
      • ev.series 图表序列
      • ev.seriesItem 图表序列子项
    • seriesitemunselected 取消选中图表序列的一个子项
      • ev.series 图表序列
      • ev.seriesItem 图表序列子项
    • tooltipshow 提示信息显示
    • tooltiphide 提示信息隐藏
  • 绑定事件的代码

    chart.on('plotclick',function(ev){
      var shape = ev.shape;
      if(shape){
        //TO DO
      }
    });
    
    

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.