Chart

Create a chart instance

A <canvas> or a canvas context must be created before drawing a chart.

const chart = new F2.Chart({
  id: 'c1', 
  width: 500,
  height: 500
});

Properties

id

  • type: String

  • description: id of the canvas element

  • default: null

el

  • type: HTMLElement

  • description: A canvas html element object can be passed directly if the id is not specified

  • default: null

const chart = new F2.Chart({
  el: document.getElementById('c1')
});

context

  • type: CanvasRenderingContext2D

  • description: context of canvas

  • default: null

const chart = new F2.Chart({
  context: document.getElementById('c1').getContext('2d')
});

NOTE: One of the three properties, id, el, context must be set one.

width

  • type: Number

  • description: width of the chart, if the width of <canvas> is set, you don't have to set the property.

  • default: null

height

  • type: Number

  • description: height of the chart, if the height of <canvas> is set, you don't have to set the property.

  • default: null

// <canvas id="myChart" width=375 height=260></canvas>
const chart = new F2.Chart({
  id: 'myChart'
});

// <canvas id="myChart"></canvas>
const chart = new F2.Chart({
  id: 'myChart',
  width: 375,
  height: 260
});

padding

  • type: Number / Array / String

  • description: the spacing between the chart plot area and the canvas border.

  • default: 'auto', which is calculated automatically

const chart = new F2.Chart({
  id: 'c1',
  padding: 'auto' // default value, calculate padding automatically
});

const chart = new F2.Chart({
  id: 'c1',
  padding: [ 0, 10, 40, 100 ] // set paddings of top, right, bottom, left
});

const chart = new F2.Chart({
  id: 'c1',
  padding: 40 // single value
});

const chart = new F2.Chart({
  id: 'c1',
  padding: [ 40, 10, 'auto', 'auto' ]  // top 40px, right 10px, bottom and left is auto calculated
});

NOTE: The usage of the padding here is the same as the padding in the CSS box model.

appendPadding

  • type: Number / Array / String

  • description: The reserved spacing on the four sides of the chart canvas area, that is, we will add the appendPadding value to the four sides based on the padding. The default is 15 px.

  • default: 15

the red area corresponds to appendPadding, the yellow area

pixelRatio

  • type: Number

  • description: Override the window's default devicePixelRatio.

  • default: 1

By default the chart's canvas will use a 1:1 pixel ratio, unless the physical display has a higher pixel ratio (e.g. Retina displays).

Setting pixelRatio to a value other than 1 will force the canvas size to be scaled by that amount, relative to the container size. There should be no visible difference on screen; the difference will only be visible when the image is zoomed or printed.

// Global configuration, all charts take effect
F2.Global.pixelRatio = window.devicePixelRatio;
// Set pixel ratio just for a chart instance
const chart = new F2.Chart({
  id: 'c1',
  pixelRatio: window.devicePixelRatio
});

plugins

  • type: Object / Array

  • description: register plugins for chart instance

  • default: null

See Plugin for more details about plug-ins.

animate

  • type: Boolean

  • description: turn animation on or off

  • default: true

limitInPlot

  • type: Boolean

  • description: whether to limit the geometry to the plot area, often used in the interaction of the chart.

  • default: false

syncY

  • type: Boolean

  • description: whether to unify the range of all y axes's data, it is used for charts with multiple y axis.

  • default: false

See demo.

Methods

chart.get()

  • description: get properties

  • return: the value of the property

The method is used to get properties of the chart, for example, chart.get('width'). The properties are listed as follows:

Property

Description

id

the id of the canvas

data

chart's data

width

width of the chart

height

height of the chart

pixelRatio

the pixel ratio of the chart

el

the dom object corresponds to canvas

canvas

the canvas instance of F2. (G.Canvas)

geoms

all the geometry objects, can be get after chart rendering

chart.source()

  • description: load the data

  • return: the current chart instance

chart.source(data)

  • data: Array, chart's data

chart.source(data, colDefs)

  • data: Array, chart's data

  • colDefs: Object, scale configuration for each data field. Optional.

chart.source(data, {
  a: {
    min: 0,
    max: 100
  }
});

Scale configuration is used to describe the data field, such as the type of the field, alias of the field name, the display format of the data value. Different data types have different configuration options, the supported data types are listed below:

  • linear: Numerical data type, such 1, 2,3,4

  • cat: Quantize data, such 'dog', 'pig'

  • timeCat: Time data

F2 will automatically detect the type of the data, and users are also allowed to define in need. For more details of scale, see Scale.

chart.scale()

  • description: scale definition for data field

  • return: current chart instance

Warning: If the data field is both defined in chart.source() and chart.scale(), the configuration which is defined latter will override previous configuration.

chart.scale('field', colDef)

scale definition for the data field

  • field: String, data field name

  • colDef: Object, configuration of the scale, see scale for more details

Example:

const data = [
  { x: 0, y: 1 },
  { x: 1, y: 2 },
  { x: 2, y: 3 }
];

// scale definition for 'x' field
chart.scale('x', {
  type: 'cat',
  values: [ 'A', 'B', 'C' ], // set display value
  alias: 'letter' // alias for attribute
});

chart.scale(colDef)

Scale definition for one or multiple data fields.

  • colDef: Object, configuration of the scale, see scale for more details.

Example:

const data = [
  { x: 0, y: 1 },
  { x: 1, y: 2 },
  { x: 2, y: 3 }
];

// scale definition for multiple data fields
chart.scale({
  x: {
    type: 'cat',
    values: [ 'A', 'B', 'C' ], // set display value
    alias: 'letter' // alias for attribute
  },
  y: {
    type: 'cat'
  }
});

chart.coord()

  • description: coordinate setting

  • return: the current chart instance

See Coordinate for more details.

chart.axis()

  • description: chart's axes configuration

  • return: the current chart instance

See Axis for more details.

chart.lengend()

  • description: chart's legend configuration

  • return: the current chart instance

See Legend for more details

chart.tooltip()

  • description: chart's tooltip configuration

  • return: the current chart instance

See Tooltip for more details.

chart.guide()

  • description: chart's guides configuration

  • return: the current guideController instance

See Guide for more details.

chart.animate()

  • description: config animation for chart

  • return: the current chart instance

See Animation for more details

chart.point()

  • description: create a point geometry, for scatter chart or bubble chart

  • return: a point geometry instance

See Geometry for more details.

chart.line()

  • description: create a line geometry, for line chart

  • return: a line geometry instance

See Geometry for more details.

chart.area()

  • description: create a area geometry, for area chart

  • return: a area geometry instance

See Geometry for more details.

chart.path()

  • description: create a path geometry, for path chart

  • return: a path geometry instance

See Geometry for more details.

chart.interval()

  • description: create a interval geometry, for bar chart

  • return: a interval geometry instance

See Geometry for more details.

chart.polygon()

  • description: create a polygon geometry, for heatmap chart or map

  • return: a polygon geometry instance

See Geometry for more details.

chart.schema()

  • description: create a schema geometry, for candlestick chart

  • return: a schema geometry instance

See Geometry for more details.

chart.render()

  • description: render the chart and call it at the end

  • return: the current chart instance

chart.clear()

  • description: clear the content of the chart

  • return: the current chart instance

chart.repaint()

  • description: repaint the chart

  • return: the current chart instance

chart.changeData(data)

  • data : Array,

  • description: change the chart's data and re-render the chart

  • return: the current chart instance

chart.changeSize(width, height)

  • width: Number / null, if null is specified, the width remains unchanged;

  • height: Number / null, if null is specified, the he remains unchanged;

  • description: change the size of the chart and re-render the chart

  • return: the current chart instance

chart.changeSize(300) only changes the width; chart.changeSize(300, 500) changes both width and height; chart.changeSize(, 300) only changes height.

chart.destroy()

  • description: destroy the chart instance, but the html element <canvas> won't be destroyed

chart.getPosition(record)

  • record : Object, is the data object

  • description: get the coordinates of the original data corresponding to the canvas

  • return: an coordinate object represents the coordinate of the record on canvas, in the format of {x: , y: }

const point = chart.getPosition({ time: '2010-02-02', value: 20 });

chart.getRecord(point)

  • point : Object, is a coordinate object describes the coordinate on canvas, in the format of {x: , y: }

  • description: get the original data record according to the coordinate on canvas

  • return: the data record object corresponds to the coordinate

const obj = chart.getRecord({ x: 100, y: 100 });

chart.getSnapRecords(point)

  • point : Object, is the coordinate object in the format of {x: , y: }

  • description: get the nearby data set according to the coordinate on canvas

  • return: the nearby data set which each element contains the mapped and corresponding original data. The structure of the return data is shown as below:

    [
  {
    _origin: { year: '1959 年', sales: 38 }, // the original data correspnds to the shape
    points: [
      { x: 0.65625, y: 0 },
      { x: 0.65625, y: 0.2375 },
      { x: 0.71875, y: 0.2375 },
      { x: 0.71875, y: 0 }
    ], // the key points with normalized data, consiting of the shape
    _originY: 38, // the original data of y-axis
    x: 260.53499698638916, // shape's x-axis coordinate on canvas
    y: 165.34375, // shape's y-axis coordiante on canvas
    index: 5 // index of the shape
  },
  ...
  {}
]
const obj = chart.getSnapRecords({x: 100, y: 100});

chart.getLegendItems()

  • description: get the items of the chart's legend, used for some legend operations

  • return: an array of items

chart.getXScale()

  • description: get the scale of the chart's x-axis

  • return: the scale object of the chart's x-axis

chart.getYScales()

  • description: get the scales of the chart's y-axes, there may be multiple y-axes

  • return: the scale object array of the chart's y-axes

chart.showTooltip(point)

  • point : Object, which is the coordinate on canvas, in the format of {x: , y: }

  • description: show tooltip of this point

  • return: the current chart instance

chart.hideTooltip()

  • description: hide the chart's tooltip

  • return: the current chart instance

PreviousAPINextGeometry

Last updated