View 视图

4 min read

视图,由 Chart 生成和管理,拥有自己独立的数据源、坐标系和图层,用于异构数据的可视化以及图表组合,一个 Chart 由一个或者多个视图 View 组成。因此 view 上的 api 同 chart 基本相同。

如何创建视图对象:

chart.view();

下面是创建视图的语法,首先你需要创建一个 chart 对象,然后调用 chart.view(cfg) 方法生成:

const view = chart.view({
  start: {
    x: 0,
    y: 0
  }, // 视图绘图区域的起始点,x、y 数值在 0 - 1 范围内
  end: {
    x: 1,
    y: 1
  } // 视图绘图区域的结束点,x、y 数值在 0 - 1 范围内
});

chart.view(cfg) 方法中的参数 cfg 可以为空或者传入以下属性:

{
  start: null, // 绘制区域的起始坐标,默认值为 {x: 0, y: 0}
  end: null, // 绘制区域的终点坐标,默认值为 {x: 1, y: 1}
  data: null, // 源数据,标准的 JSON 数组
  animate: {boolean} // 同 chart 配置保持一致
}

属性

start

绘制区域的起始坐标,结构如下:

{
  x: 0, // x 取值范围为 0 -1
  y: 0 // y 取值范围为 0 -1
}

对于 view,我们的起始点是从左上角开始的。

end

绘制区域的终点坐标,结构如下:

{
  x: 0, // x 取值范围为 0 -1
  y: 0 // y 取值范围为 0 -1
}

data

视图的数据源,同时也可以使用 view.source(data) 方法设置数据源。

animate

视图是否执行动画,默认执行。

!注意:chart 下创建的 view 将默认使用 chart 的 列定义坐标轴 axis 配置坐标系 coord 配置,即如果 view 不自己定义则默认同 chart 的配置相同;如果 view 自己定义了相应的配置,则以自己的为准。

如下实例所示:

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
];

const chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 400,
  padding: [ 40, 80, 100, 80 ]
});

chart.source(data, {
  genre: {
    alias: '游戏种类'
  },
  sold: {
    alias: '销售量',
    min: 0
  }
});
chart.coord('polar', {
  innerRadius: 0.6
});
chart.axis('genre', {
  label: {
    textStyle: {
      fill: '#f80',
      fontWeight: 'bold'
    }
  }
});
chart.interval().position('genre*sold').color('genre');

const view = chart.view({
  start: {
    x: 0.25,
    y: 0.25
  },
  end: {
    x: 0.75,
    y: 0.75
  }
});
view.source(data); // 默认使用 chart 的列定义
view.coord('polar', {
  innerRadius: 0
}); // 覆盖了 chart 的 coord 配置
view.axis('sold', false); // 对于 genre 对应的坐标轴配置会默认使用 chart 的坐标轴配置
view.interval()
  .position('genre*sold')
  .color('genre', [ '#61A5E8', '#7ECF51', '#EECB5F', '#E4925D', '#E16757' ]);
chart.render();

方法

source

chart.source()

getXScale

chart.getXScale(),只是返回该视图 x 轴对应的度量。

getYScales

chart.getYScales(),只是返回该视图 y 轴对应的度量。

getXY

chart.getXY()

filter

chart.filter()

axis

chart.axis()

guide

chart.guide()

scale

chart.scale()

coord

chart.coord()

tooltip

(enable: boolean)

view 上的 tooltip 方法只用于开启和关闭 tooltip。

view.tooltip(false); // 关闭 view 上的 tooltip

animate

chart.animate()

clear

chart.clear()

changeData

chart.changeData()

changeVisible

chart.changeVisible()

repaint

chart.repaint()

destroy

chart.destroy()

line

chart.line()

path

chart.path()

interval

chart.interval()

area

chart.area()

point

chart.point()

polygon

chart.polygon()

edge

chart.edge()

schema

chart.schema()

heatmap

chart.heatmap()