Skip to main content

Pie-3d

tip

There is the live working demo page example.

import '/path-to/x-charts-js/components/pie-3d/main.js';

xChartsJs.add(addMethodArgument);

General notes​

Rotations order​

The chart has several options which transform its position in 3d space. The transformations happen in this order:

There is no way to change this order.

Unsafely large numeric values​

warning

Currently there are no safeguards regarding too large numbers, e.g. those which are close to Number.MAX_VALUE so that mathematical operations become inaccurate.

E.g. if the data provided contains values large enough that when summed up, processed the result will be inaccurate (Infinity, NaN etc.), then currently the user is supposed to take care of this.

Normalize data to something reasonable/safe, e.g. divide each item by 1,000,000,000,000 etc., exclude/combine too small values etc.

Currently this was deemed to be an overkill to implement.

xChartsJs.add() method​

Arguments:

  • addMethodArgument: object

addMethodArgument.type​

Constant string 'pie-3d'

addMethodArgument.zIndex​

A numeric integer string. E.g. '-1', '0' etc.

Similar to the CSS z-index. Equals the order of the component in a 'component stack', which is used to draw the components.

addMethodArgument.options​

An object.

addMethodArgument.options.thicknessPx​

A number of pixels for the pie's height/thickness. Must be >= 0.

addMethodArgument.options.radiusPx​

A number of pixels for the pie's radius. Must be > 0.

addMethodArgument.options.centerXPx​

A number, the x coordinate of the pie's center point (the origin is the top left corner, which is the standard for the HTML 5 Canvas).

addMethodArgument.options.centerYPx​

A number, the y coordinate of the pie's center point (the origin is the top left corner, which is the standard for the HTML 5 Canvas).

addMethodArgument.options.startAtDeg​

A number, the angle in degrees from which the first slice will be drawn counterclockwise. Must be >= 0 and < 360.

addMethodArgument.options.rotationAroundCenterXAxisDeg​

A number, the angle in degrees by which the standard 2d pie will be rotated around the axis passing thru its center and parallel to the originX axis. Must be >= 0 and < 360.

addMethodArgument.options.rotationAroundCenterZAxisDeg​

A number, the angle in degrees by which the standard 2d pie will be rotated around the axis passing thru its center and parallel to the originZ axis. Must be >= 0 and < 360.

addMethodArgument.data​

An array of data to draw.

addMethodArgument.data[N]​

An object.

addMethodArgument.data[N].value​

A number. The actual numeric value to be represented by the chart. Must be >= 0.

addMethodArgument.data[N].meta​

An object.

addMethodArgument.data[N].meta.faceColor​

A string. A hexadecimal color code. E.g. #3300ff or #3300FF.

The face of the slice on the pie, which corresponds to the data item, will be filled with this color.

addMethodArgument.data[N].meta.rimColor​

A string. A hexadecimal color code. E.g. #3300ff or #3300FF.

The rim part of the slice on the pie, which corresponds to the data item, will be filled with this color.