Chart
Create a chart instance
A <canvas>
or a canvas context must be created before drawing a chart.
Properties
id
id
type:
String
description: id of the canvas element
default: null
el
el
type:
HTMLElement
description: A canvas html element object can be passed directly if the id is not specified
default: null
context
context
type:
CanvasRenderingContext2D
description: context of canvas
default: null
NOTE: One of the three properties, id
, el
, context
must be set one.
width
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
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
padding
padding
type:
Number
/Array
/String
description: the spacing between the chart plot area and the canvas border.
default: 'auto', which is calculated automatically
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
pixelRatio
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.
plugins
plugins
type:
Object
/Array
description: register plugins for chart instance
default: null
See Plugin for more details about plug-ins.
animate
animate
type:
Boolean
description: turn animation on or off
default: true
limitInPlot
limitInPlot
type:
Boolean
description: whether to limit the geometry to the plot area, often used in the interaction of the chart.
default: false
syncY
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()
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 datacolDefs
: Object, scale configuration for each data field. Optional.
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,4cat
: 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 namecolDef
: Object, configuration of the scale, see scale for more details
Example:
chart.scale(colDef)
Scale definition for one or multiple data fields.
colDef
: Object, configuration of the scale, see scale for more details.
Example:
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()
chart.lengend()
description: chart's legend configuration
return: the current chart instance
See Legend for more details
chart.tooltip()
chart.tooltip()
description: chart's tooltip configuration
return: the current chart instance
See Tooltip for more details.
chart.guide()
chart.guide()
description: chart's guides configuration
return: the current
guideController
instance
See Guide for more details.
chart.animate()
chart.animate()
description: config animation for chart
return: the current chart instance
See Animation for more details
chart.point()
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()
chart.line()
description: create a line geometry, for line chart
return: a line geometry instance
See Geometry for more details.
chart.area()
chart.area()
description: create a area geometry, for area chart
return: a area geometry instance
See Geometry for more details.
chart.path()
chart.path()
description: create a path geometry, for path chart
return: a path geometry instance
See Geometry for more details.
chart.interval()
chart.interval()
description: create a interval geometry, for bar chart
return: a interval geometry instance
See Geometry for more details.
chart.polygon()
chart.polygon()
description: create a polygon geometry, for heatmap chart or map
return: a polygon geometry instance
See Geometry for more details.
chart.schema()
chart.schema()
description: create a schema geometry, for candlestick chart
return: a schema geometry instance
See Geometry for more details.
chart.render()
chart.render()
description: render the chart and call it at the end
return: the current chart instance
chart.clear()
chart.clear()
description: clear the content of the chart
return: the current chart instance
chart.repaint()
chart.repaint()
description: repaint the chart
return: the current chart instance
chart.changeData(data)
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)
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()
chart.destroy()
description: destroy the chart instance, but the html element
<canvas>
won't be destroyed
chart.getPosition(record)
chart.getPosition(record)
record
: Object, is the data objectdescription: 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: }
chart.getRecord(point)
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
chart.getSnapRecords(point)
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:
chart.getLegendItems()
chart.getLegendItems()
description: get the items of the chart's legend, used for some legend operations
return: an array of items
chart.getXScale()
chart.getXScale()
description: get the scale of the chart's x-axis
return: the scale object of the chart's x-axis
chart.getYScales()
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)
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()
chart.hideTooltip()
description: hide the chart's tooltip
return: the current chart instance
Last updated