网站建设哪家好灵活苏州久远网络,中山网站建设外包,wordpress充值金币的插件,2018做网站开发一个月工资多少前言
在数据可视化日益成为业务决策核心驱动力的今天#xff0c;高效、灵活的图表配置系统已成为开发人员不可或缺的工具。OneCode图表组件凭借其丰富的图表类型与精细化的配置能力#xff0c;为开发者提供了构建专业数据可视化界面的完整解决方案。然而#xff0c;随着图表…前言
在数据可视化日益成为业务决策核心驱动力的今天高效、灵活的图表配置系统已成为开发人员不可或缺的工具。OneCode图表组件凭借其丰富的图表类型与精细化的配置能力为开发者提供了构建专业数据可视化界面的完整解决方案。然而随着图表类型的不断扩展与配置项的日益丰富如何快速定位并正确使用特定配置属性已成为提升开发效率的关键挑战。
本配置字典博文旨在为开发者提供一份全面、系统的OneCode图表配置参考手册。基于对组件配置文件的深度解析我们梳理了包括Pyramid、Radar、RealTimeLine、Funnel、HLED、Thermometer等15图表类型的全部配置属性涵盖图表标题、功能属性、外观样式、数据格式、交互效果等六大核心维度。每个配置项均包含详细的属性说明、取值范围与默认值定义形成结构化的配置速查体系。
无论是实时数据监控场景中需要调整的RealTimeLine刷新频率还是仪表盘展示中关键的AngularGauge指针样式抑或是布局优化时必不可少的边距chartLeftMargin与填充captionPadding设置读者都能在此找到权威的配置指南。我们特别对跨图表通用配置项如字体属性、数值格式化、工具提示进行了归纳整理帮助开发者建立全局配置思维。
本文档不仅是新手入门的学习手册更是资深开发者的案头速查工具。通过左侧导航的图表类型索引与配置项功能分类您可以快速定位所需内容。随文附上的配置示例与实际效果对照将帮助您更直观地理解各项配置的作用机制。
我们期待这份配置字典能够成为您驾驭OneCode图表组件的得力助手让每一个数据可视化需求都能找到最精准的配置方案最终实现业务数据的高效表达与价值传递。
1. Pyramid (金字塔图)
1.1 图表基本配置配置项说明类型可选值默认值caption图表标题文本String任意文本“”captionFontSize标题字体大小Number8-7214captionFontColor标题字体颜色String颜色代码“#333333”captionAlignment标题对齐方式Stringleft/center/right“center”subCaption图表副标题文本String任意文本“”subCaptionFontSize副标题字体大小Number8-72121.2 功能属性配置项说明类型可选值默认值animation是否启用动画效果Booleantrue/falsetruepalette图表调色板Number/Array0-19或颜色数组0showPrintMenu是否显示打印菜单Booleantrue/falsetrueshowDownloadMenu是否显示下载菜单Booleantrue/falsetrueshowHoverEffect是否启用悬停效果Booleantrue/falsetrueenableSlicing是否允许切片交互Booleantrue/falsefalse1.3 金字塔特有属性配置项说明类型可选值默认值pyramidMode金字塔显示模式String“2D”/“sliced”“2D”yAxisMinValueY轴最小值Number任意数值0yAxisMaxValueY轴最大值Number任意数值自动计算pyramidBaseWidth金字塔底部宽度百分比Number10-10080pyramidTopWidth金字塔顶部宽度百分比Number0-5010isInverted是否反转金字塔方向Booleantrue/falsefalse2. Radar (雷达图)
2.1 图表配置配置项说明类型可选值默认值caption图表标题String任意文本“”xAxisNameX轴名称String任意文本“”yAxisNameY轴名称String任意文本“”showBorder是否显示边框Booleantrue/falsetrueborderColor边框颜色String颜色代码“#666666”bgColor图表背景色String颜色代码“#FFFFFF”canvasBgColor画布背景色String颜色代码“#FFFFFF”2.2 数据系列配置配置项说明类型可选值默认值showLabels是否显示数据标签Booleantrue/falsetrueshowValues是否显示数据值Booleantrue/falsefalselabelFontSize标签字体大小Number8-7212valueFontSize数值字体大小Number8-7212dataPointRadius数据点半径Number1-204connectNullData是否连接空数据点Booleantrue/falsefalse2.3 雷达图特有属性配置项说明类型可选值默认值radarFillColor雷达图填充颜色String颜色代码“#F8F8F8”radarFillAlpha雷达图填充透明度Number0-10030borderThickness雷达图边框厚度Number1-102numDivLines分割线数量Number1-205divLineColor分割线颜色String颜色代码“#CCCCCC”showAxes是否显示轴线Booleantrue/falsetrue3. RealTimeLine (实时折线图)
3.1 标题与轴配置配置项说明类型可选值默认值caption图表标题String任意文本“”xAxisNameX轴名称String任意文本“Time”yAxisNameY轴名称String任意文本“Value”xAxisNameFontSizeX轴名称字体大小Number8-7212yAxisNameFontSizeY轴名称字体大小Number8-7212xAxisValuesFontSizeX轴值字体大小Number8-7211yAxisValuesFontSizeY轴值字体大小Number8-72113.2 实时属性配置配置项说明类型可选值默认值updateInterval数据更新间隔(毫秒)Number100-50001000dataStreamURL实时数据URLString有效URL“”refreshOnLoad加载时是否刷新Booleantrue/falsetrueshowRTMenuItem是否显示实时菜单Booleantrue/falsetruertAutoUpdate是否自动更新Booleantrue/falsetruertUpdateOnScroll滚动时是否更新Booleantrue/falsefalsebufferSize数据缓冲区大小Number5-100103.3 折线图特有属性配置项说明类型可选值默认值lineThickness线条厚度Number1-102anchorRadius锚点半径Number1-204anchorBorderThickness锚点边框厚度Number0-51anchorBgColor锚点背景色String颜色代码“#FFFFFF”anchorBorderColor锚点边框颜色String颜色代码系列颜色showAnchors是否显示锚点Booleantrue/falsetrueanchorSides锚点边数Number3-10044. RealTimeLineDY (双Y轴实时折线图)
4.1 双Y轴配置配置项说明类型可选值默认值showPrimaryYAxis是否显示主Y轴Booleantrue/falsetrueshowSecondaryYAxis是否显示次Y轴Booleantrue/falsetrueprimaryYAxisName主Y轴名称String任意文本“Value 1”secondaryYAxisName次Y轴名称String任意文本“Value 2”primaryYAxisMinValue主Y轴最小值Number任意数值0primaryYAxisMaxValue主Y轴最大值Number任意数值自动计算secondaryYAxisMinValue次Y轴最小值Number任意数值0secondaryYAxisMaxValue次Y轴最大值Number任意数值自动计算syncAxisLimits是否同步轴限制Booleantrue/falsefalse4.2 其他特有属性配置项说明类型可选值默认值numDivLinesPrimaryYAxis主Y轴分割线数量Number1-205numDivLinesSecondaryYAxis次Y轴分割线数量Number1-205primaryYAxisColor主Y轴颜色String颜色代码“#1A80E5”secondaryYAxisColor次Y轴颜色String颜色代码“#F53F3F”showAxisOnLeft是否在左侧显示轴Booleantrue/falsetrue5. RealTimeStackedArea (实时堆叠面积图)
5.1 面积图配置配置项说明类型可选值默认值fillAlpha填充透明度Number0-10070showAreaBorder是否显示面积边框Booleantrue/falsetrueareaBorderColor面积边框颜色String颜色代码系列颜色areaBorderThickness面积边框厚度Number1-51stack100Percent是否100%堆叠Booleantrue/falsefalseshowShadow是否显示阴影Booleantrue/falsefalseshadowColor阴影颜色String颜色代码“#000000”shadowAlpha阴影透明度Number0-100306. RealTimeColumn (实时柱状图)
6.1 柱状图配置配置项说明类型可选值默认值columnWidth柱宽百分比Number10-9060showColumnShadow是否显示柱阴影Booleantrue/falsefalseshadowAlpha阴影透明度Number0-10040use3DLighting是否使用3D光照Booleantrue/falsefalsecolumnBorderThickness柱边框厚度Number0-51columnBorderColor柱边框颜色String颜色代码“#FFFFFF”showZeroPlane是否显示零平面Booleantrue/falsetruezeroPlaneColor零平面颜色String颜色代码“#CCCCCC”7. RealTimeStackedColumn (实时堆叠柱状图)
7.1 堆叠柱状图配置配置项说明类型可选值默认值stack100Percent是否100%堆叠Booleantrue/falsefalseshowCumulativeValues是否显示累积值Booleantrue/falsefalsecumulativeLabelFontSize累积标签字体大小Number8-7212cumulativeLabelFontColor累积标签字体颜色String颜色代码“#333333”plotSpacePercent绘图空间百分比Number0-100808. HLED/VLED (水平/垂直LED图表)
8.1 LED通用配置配置项说明类型可选值默认值value当前值Number任意数值0minValue最小值Number任意数值0maxValue最大值Number任意数值100ledSizeLED大小Number5-5015ledSpacingLED间距Number0-202showValue是否显示值Booleantrue/falsetruevalueFontSize值字体大小Number8-72148.2 颜色范围配置配置项说明类型可选值默认值colorRange颜色范围配置Array颜色范围对象数组见下方示例useColorName是否使用颜色名称Booleantrue/falsetruecolorRange示例配置
colorRange: [{ minValue: 0, maxValue: 30, color: #FF0000 },{ minValue: 31, maxValue: 70, color: #FFFF00 },{ minValue: 71, maxValue: 100, color: #00FF00 }
]9. Cylinder (圆柱图)
9.1 圆柱图配置配置项说明类型可选值默认值cylinderRadius圆柱半径百分比Number10-9040cylinderHeight圆柱高度百分比Number10-9080showCylinderBorder是否显示圆柱边框Booleantrue/falsetruecylinderBorderColor圆柱边框颜色String颜色代码“#FFFFFF”cylinderBorderThickness圆柱边框厚度Number1-51fillColor填充颜色String颜色代码“#1A80E5”fillAlpha填充透明度Number0-10080showValue是否显示值Booleantrue/falsetrue10. Thermometer (温度计图)
10.1 温度计配置配置项说明类型可选值默认值value当前温度值Number任意数值0minValue最低温度Number任意数值0maxValue最高温度Number任意数值100thermometerHeight温度计高度Number50-500200thermometerWidth温度计宽度Number10-10030bulbRadius底部灯泡半径Number5-5015showValue是否显示值Booleantrue/falsetruevalueFontSize值字体大小Number8-7214colorRange颜色范围配置Array颜色范围对象数组见下方示例colorRange示例配置
colorRange: [{ minValue: 0, maxValue: 30, color: #0000FF },{ minValue: 31, maxValue: 60, color: #00FF00 },{ minValue: 61, maxValue: 100, color: #FF0000 }
]11. HLinearGauge (水平线性仪表)
11.1 仪表配置配置项说明类型可选值默认值value当前值Number任意数值0minValue最小值Number任意数值0maxValue最大值Number任意数值100gaugeLength仪表长度Number100-1000300gaugeHeight仪表高度Number20-20060showValue是否显示值Booleantrue/falsetruevalueFontSize值字体大小Number8-7214pointerLength指针长度百分比Number50-10080pointerThickness指针厚度Number1-103pointerColor指针颜色String颜色代码“#FF0000”11.2 刻度配置配置项说明类型可选值默认值majorTMNumber主刻度数量Number2-205minorTMNumber次刻度数量Number0-104majorTMHeight主刻度高度Number5-3015minorTMHeight次刻度高度Number5-2010majorTMColor主刻度颜色String颜色代码“#333333”minorTMColor次刻度颜色String颜色代码“#666666”12. AngularGauge (角度仪表)
12.1 角度仪表配置配置项说明类型可选值默认值value当前值Number任意数值0minValue最小值Number任意数值0maxValue最大值Number任意数值100gaugeStartAngle仪表起始角度Number0-360135gaugeEndAngle仪表结束角度Number0-36045gaugeOuterRadius仪表外半径Number50-500100gaugeInnerRadius仪表内半径Number0-4500showValue是否显示值Booleantrue/falsetruevalueFontSize值字体大小Number8-721412.2 指针配置配置项说明类型可选值默认值dialRadius指针半径百分比Number50-10080dialThickness指针厚度Number1-205dialColor指针颜色String颜色代码“#FF0000”pivotRadius轴点半径Number5-208pivotColor轴点颜色String颜色代码“#333333”pivotBorderColor轴点边框颜色String颜色代码“#FFFFFF”pivotBorderThickness轴点边框厚度Number1-5213. Annotations (标注)
13.1 标注通用配置配置项说明类型可选值默认值showBelow是否显示在图表下方Booleantrue/falsefalsedrawAnchors是否绘制锚点Booleantrue/falsefalseid标注IDString唯一标识符“”type标注类型String“text”/“line”/“rectangle”/“circle”/“arc”/“image”/“polygon”/“path”“text”13.2 文本标注配置配置项说明类型可选值默认值text标注文本String任意文本“”fontSize字体大小Number8-7212fontColor字体颜色String颜色代码“#000000”fontBold是否粗体Booleantrue/falsefalsefontItalic是否斜体Booleantrue/falsefalsexX坐标Number任意数值0yY坐标Number任意数值0align对齐方式Stringleft/center/right“left”rotation旋转角度Number0-360013.3 线条标注配置配置项说明类型可选值默认值x1起点X坐标Number任意数值0y1起点Y坐标Number任意数值0x2终点X坐标Number任意数值0y2终点Y坐标Number任意数值0thickness线条厚度Number1-202color线条颜色String颜色代码“#000000”dashed是否虚线Booleantrue/falsefalsedashLen虚线长度Number1-505dashGap虚线间距Number1-505arrowAtStart起点是否带箭头Booleantrue/falsefalsearrowAtEnd终点是否带箭头Booleantrue/falsefalsearrowWidth箭头宽度Number1-205arrowHeight箭头高度Number1-20514. 通用配置项详解
14.1 边距和填充配置
prop: [captionPadding, xAxisNamePadding, yAxisNamePadding, yAxisValuesPadding, labelPadding, valuePadding, plotSpacePercent, chartLeftMargin, chartRightMargin, chartTopMargin, chartBottomMargin, legendPadding, canvasLeftMargin, canvasRightMargin, canvasTopMargin, canvasBottomMargin]
配置项说明类型默认值captionPadding标题内边距Number10xAxisNamePaddingX轴名称内边距Number5yAxisNamePaddingY轴名称内边距Number5yAxisValuesPaddingY轴值内边距Number5labelPadding标签内边距Number5valuePadding值内边距Number5plotSpacePercent绘图空间百分比Number80chartLeftMargin图表左边距Number10chartRightMargin图表右边距Number10chartTopMargin图表上边距Number10chartBottomMargin图表下边距Number10legendPadding图例内边距Number5canvasLeftMargin画布左边距Number10canvasRightMargin画布右边距Number10canvasTopMargin画布上边距Number10canvasBottomMargin画布下边距Number1014.2 图例配置配置项说明类型可选值默认值showLegend是否显示图例Booleantrue/falsetruelegendPosition图例位置Stringtop/bottom/left/right“bottom”legendFontSize图例字体大小Number8-7212legendFontColor图例字体颜色String颜色代码“#333333”legendBgColor图例背景色String颜色代码“#FFFFFF”legendBorderColor图例边框颜色String颜色代码“#CCCCCC”legendBorderThickness图例边框厚度Number0-51legendShadow是否显示图例阴影Booleantrue/falsefalselegendAllowDrag是否允许拖动图例Booleantrue/falsefalse14.3 工具提示配置配置项说明类型可选值默认值showTooltip是否显示工具提示Booleantrue/falsetruetooltipBgColor工具提示背景色String颜色代码“#000000”tooltipBorderColor工具提示边框颜色String颜色代码“#666666”tooltipBorderThickness工具提示边框厚度Number0-51tooltipFontColor工具提示字体颜色String颜色代码“#FFFFFF”tooltipFontSize工具提示字体大小Number8-7212tooltipAlpha工具提示透明度Number0-10090tooltipPadding工具提示内边距Number0-205tooltipSeparator工具提示分隔符String任意文本: 14.4 数值格式化配置配置项说明类型可选值默认值numberPrefix数值前缀String任意文本“”numberSuffix数值后缀String任意文本“”decimalSeparator小数点分隔符String./,“.”thousandSeparator千分位分隔符String,/.\s“,”decimalPrecision小数位数Number0-100formatNumber是否格式化数字Booleantrue/falsetrueformatNumberScale是否格式化数字刻度Booleantrue/falsetruescaleUnit刻度单位StringK/M/B/T“”numberScaleValue数字刻度值Number1000/1000000等100015. 事件配置
15.1 通用事件配置项说明类型可选值默认值clickURL点击图表时的URLString有效URL“”clickURLOpenInNewWindow是否在新窗口打开URLBooleantrue/falsetrueonLoadComplete加载完成事件StringJavaScript函数名“”onClick点击事件StringJavaScript函数名“”onMouseOver鼠标悬停事件StringJavaScript函数名“”onMouseOut鼠标移出事件StringJavaScript函数名“”结语
以上是OneCode组件库中所有图表类型的详细配置属性说明。这些配置项覆盖了从基础外观到高级交互的各个方面通过灵活组合这些配置可以创建出满足各种需求的可视化图表。实际使用时建议结合具体场景选择合适的配置项并参考官方文档获取更多示例和最佳实践。
