标签：box 圆角 BoxSeries3D JavaScript invalidateData ColorRGBA new yCenter 3D

 

这个例子显示了一个动画的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 }) ) 

标签：box,圆角,BoxSeries3D,JavaScript,invalidateData,ColorRGBA,new,yCenter,3D
来源： https://www.cnblogs.com/lightningchart/p/16073459.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。