這個例子顯示了一個動畫的3D條形圖，條形圖的顏色是根據其高度動態變化的。
這個圖表是用BoxSeries3D渲染的，這個系列類型能夠渲染任何數量的Boxes，並允許在運行時的任何時候進行單獨的全層修改（位置、大小、顏色）。
這個例子還展示了圓角邊緣的功能。雖然默認情況下是啓用的，但可以在任何時候用BoxSeries3D.setRoundedEdges來調整和禁用。
BoxSeries3D的數據格式
BoxSeries3D支持兩種不同格式的輸入數據，即。
BoxDataCentered（指定box center 座標和尺寸）
BoxDataBounds (指定box的起始和結束座標)
在這些幾何信息的基礎上，人們還可以提供以下可選屬性。
ID。
通過提供一個ID，box的屬性可以在以後被修改（通過傳遞相同的ID）。
當修改一個先前添加的box時，所有的屬性（除id外）都是可選的（提供的屬性被覆蓋）。
// Initial Box definition (BoxDataCentered format).
BoxSeries3D.invalidateData([{
xCenter: 0,
yCenter: 0,
zCenter: 0,
xSize: 1,
ySize: 1,
zSize: 1,
id: 'box-#0'
}])
// Modify 'yCenter' property only.
BoxSeries3D.invalidateData([{
id: 'box-#0',
yCenter: 5
}])
顏色:
爲box指定一個顏色，在啓用單獨着色模式時使用。
// Add Boxes with individual Colors.
BoxSeries3D.invalidateData([{
...,
color: ColorRGBA( 255, 0, 0 )
}])
// Enable individual coloring mode.
BoxSeries3D.setFillStyle( new IndividualPointFill() )
值。
爲box指定一個查詢值，以便在啓用查詢着色模式時使用。
// Define Color Look-Up-Table.
const lut = new LUT( {
steps: [
{ value: 0, color: ColorRGBA( 0, 0, 0 ) },
{ value: 100, color: ColorRGBA( 255, 0, 0 ) }
],
interpolate: true
} )
// Add Boxes with look up values.
BoxSeries3D.invalidateData([{
...,
value: 50
}])
// Enable look up coloring mode
BoxSeries3D.setFillStyle( new PalettedFill({ lut }) )