Chart

用于创建图表的类，用于为创建的图表设置属性以及提供各种配置项方法。

var chart = new GM.Chart({
  id: 'c1',
  margin: [10,20,10,20]
});

属性

id

图表 canvas 画布的 id。

el

图表 canvas 对象。

margin

画布内部的边距，可以是数组 [top, right, bottom, left] 也可以是一个数字。

方法

source

chart.source(data[, defs])

设置图表的数据源。

参数

• data: Array

  数据源，格式为 JSON 形式的数组。

• defs: Object

  【可选】，是一个对象，用于数据字段的定义，如数据的类型，显示别名，时间类型的格式等，不同的数字类型的配置项不同，支持的数据类型有：数字类型(linear)、分类类型(cat)、和时间类型(timeCat）详情参考 G2 Scale API中对数字类型(linear)、分类类型(cat)、和时间类型(timeCat）的介绍。

示例

var data = [
  {type: 0, value: 1},
  {type: 1, value: 2},
  {type: 2, value: 3},
];

chart.source(data, {
  type: {
    type: 'cat', // 声明 type 字段为分类类型
    min: 0, // 设定最小值
    tickInterval: 10 // 设定type轴的刻度间隔
  }
})

axis

chart.axis(dim, cfg)

设置坐标轴样式。

chart.axis(false)

不显示所有的坐标轴。

chart.axis(dim, cfg)

参数

• dim: String

  dim 对应数据源中的字段名，即指定设置该字段对应的坐标轴显示样式。

• cfg: Object

  坐标轴配置信息：

  + line 坐标轴轴线，符合 canvas 图形属性；
  + labelOffset 文本距离坐标轴的位置；
  + tickLine 坐标轴上刻度线的配置信息，除了符合 canvas 图形属性外，还有 value (刻度线长度)属性；
  + grid 栅格线的配置项，符合 canvas 图形属性, 支持函数 function(text, index) 返回栅格的配置项；
  + label 坐标轴的文本，符合 canvas 的文本属性, 支持函数 function(text, index, total) 返回文本的配置项。
  
  

chart.axis('dim', false); // 不显示该字段对应的坐标轴
chart.axis('dim', {
    // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
    line: {
    lineWidth: 1,
    stroke: '#ccc'
  },
  // 标轴文本距离轴线的距离
  labelOffset: 20,
    // 坐标点对应的线，null 不显示 图形属性
    tickLine: {
    lineWidth: 1,
    stroke: '#ccc',
    value: 5,// 刻度线长度
  },
  // 0％处的栅格线着重显示
    grid: function(text,index){
    if(text === '0%'){
      return {
        stroke: '#efefef'
      };
    }else{
      return {
        stroke: '#f7f7f7'
      };
    }
  },
  // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
    label: function(text, index, total) {
      var cfg = {
          fill: '#979797',
      font: '14px san-serif',
      offset: 6
      };
      if (index === 0) {
        cfg.textAlign = 'left';
      }
      if (index > 0 && index === total - 1) {
        cfg.textAlign = 'right';
      }
    cfg.text = text + '%';   cfg.text 支持文本格式化处理
      return cfg;
    },
});

图形属性详见。

文本属性详见。

coord

chart.coord(type, cfg)

设置坐标系，并可对坐标系进行各种操作。注意 chart.coord(type[, cfg]) 操作返回的不是 chart 对象，而是关于 Coord 的一个辅助类，以便进行坐标系的各种变换。

参数

• type: String

  坐标系的类型，具体包括：

• cfg: Object

  【可选】 坐标系的配置信息。

  通用 cfg 属性如下：

  • transposed 坐标系的 x，y 轴是否交换，可以将垂直的柱状图转换成水平的柱状图。

  type 为 polar的 cfg 属性如下：

  • startAngle: 极坐标系的起始角度；
  • endAngle: 极坐标系的结束角度；
  • inner: 内部坐标系起始点的半径，[0 - 1]。

chart.coord('polar', {
  inner: 0.3, // 内部极坐标系的半径，[0 - 1]的小数，对于 plus 坐标系，默认值为 0.5
    startAngle: -1.25 * Math.PI, // 极坐标系的起始角度
  endAngle: 0.25 * Math.PI // 极坐标系的结束角度
});

guide

chart.guide()

为图表添加自定义的辅助元素，如辅助线、辅助文本等.目前支持的辅助类型有：折线（line）、弧线（arc）、长方形（rect）、文字（text）和自定义 html，其中 line、arc、rect 是提前绘制在背景上，text 和 html 是在动画完成后绘制在图形上。

chart.guide().html(point, html, [cfg])

绘制辅助 html。

参数

• point: Array

  表示在画布上放置 html 的坐标点，格式 Array：[x, y]

  • x：是 x 轴坐标对应字段的值，是原始数据值，不是画布坐标。
  • y：是 y 轴坐标对应字段的值，是原始数据值，不是画布坐标。

  当然，如果 x y 值为分类类型的话，还可以传入索引值。

  另外还提供了两个关键字： min、max 用于表示对应字段的最大值和最小值，主要用户快速定位坐标轴的起点和终点。

• cfg: Object

  辅助 html 的显示样式配置，可选。

  • 对齐(align)：支持 tr、tc、tl、br、bc、bl、lc、rc、cc 9 点对齐。

  

  • 偏移(offset)：格式 Array：[x, y]，代表画布偏移坐标。

var point = ['周日',28];
var html = "<div style='border-radius: 12px;border: none;width: 22px;height: 22px;background-color: rgba(102, 182, 241, 0.5);'></div>";
var cfg = {
  align: 'cc',
  offset: [-5,-5]
}

chart.guide().html(point,html,cfg);

chart.guide().rect(from, to, [cfg])

绘制辅助框。

参数

• from: Array
• to: Array

分别表示线的左上角顶点和右下角顶点，这两个参数均为数组 Array 格式： [x, y]：

• x：是 x 轴坐标对应字段的值，是原始数据值，不是画布坐标。
• y：是 y 轴坐标对应字段的值，是原始数据值，不是画布坐标。

当然，如果 x、y 值为分类类型的话，则支持传入索引值。

另外还提供了两个关键字： min max 用于表示对应字段的最大值和最小值，主要用户快速定位坐标轴的起点和终点。

• cfg: Object

辅助框的显示样式配置，可选。

// 添加辅助框
chart.guide().rect([startXValue, startYValue], [endXValue, startYValue], {
  lineWidth: 0, // 辅助框的边框宽度
  fill: '#f80', // 辅助框填充的颜色
  fillOpacity: 0.1, // 辅助框的背景透明度
  stroke: '#ccc', // 辅助框的边框颜色设置
  radius: 5 // 辅助框的圆角设置
});

折线(line)、弧线(arc)、文字(text) 的配置和使用与 G2 相同，请参见 G2 Chart Guide API

animate

chart.animate()

动画。

chart.animate().waveh(cfg)

水平方向的平铺。

chart.animate().wavec(cfg)

环形平铺。

chart.animate().scalex(cfg)

x轴上的缩放。

chart.animate().scaley(cfg)

y轴上的缩放。

chart.animate().scalexy(cfg)

x 和 y 轴同时缩放。

参数 cfg

• cfg: Object

  动画配置：

  • duration: String

    动画时间（毫秒），默认1000。

  • easing: Function/String

    缓动函数或缓动函数名称，默认easeInOut。支持linear、easeIn、easeOut、easeInOut、backIn、backOut、elastic、bounce

  • success: Function

    动画结束后执行的回调函数。

  • reduceMultiple: Number

    降频倍数，默认1。当硬件条件不佳时可以设置为2，将每秒的帧数降低1倍。

chart.animate().scalex({
    duration: 2000,
    easing: 'elastic',
    success: function() {
      alert('ok');
    }
});

render

chart.render()

绘制图表。

clear

chart.clear()

清空图表。

destroy

chart.destroy()

销毁图表。

getPosition

chart.getPosition(record)

获取数据对应在画布上的坐标。

参数

• record: Object

  原始数据 {Object}，格式：{xDim, yDim}。

返回

• point: Object

  画布坐标 {Object}，格式：{x, y}。

getRecord

chart.getRecord(point)

获取画布坐标对应的当前坐标系的数据值。

参数

• point: Object

  画布坐标 {Object}，格式：{x, y}。

返回

• record: Object

  当前坐标系的数据值 {Object}，格式：{xDim, yDim}。

getSnapRecords

chart.getSnapRecords(point, dim)

根据画布坐标获取逼近的数据集

参数

• point: Object

  画布坐标 {Object}，格式：{x, y}。

• dim: String

  逼近的坐标轴维度，可选，直角坐标系下默认为映射到横轴的维度，极坐标系下默认为映射到半径的维度。饼图通常使用映射到角度的维度，所以，在饼图中使用时需要传递dim参数为映射到角度的维度。

返回

• result: Array

  切割线逼近点对应数据集 {Array}，格式：[record1,record2,...]