stackedchart
React Native stacked chart component.
Start
npm install stackedchart --save
Use
;; const gridData = id: 100 data: 200 190 500 200 300 111 name: 'test1' backgroundColor: 'rgba(4,135,168,0.5)' id: 200 data: 300 400 100 200 1800 677 name: 'test2' backgroundColor: 'rgba(230,0,114,0.5)'; { return <StackedChart dataSource=gridData style= width: 600 height: 600 title="圣诞节" xAxisTitle="人工" yAxisTitle="时间" />;};
PropTypes
属性 | 类型 | 说明 | 默认值 |
---|---|---|---|
dataSource | array | 数据源,数组元素类型为object,可配置id,data,name,backgroundColor | [] |
yCount | number | 行数 | 12 |
yTitleRate | number | 每几行作为一个行标题 | 2 |
yNumberPerUnit | number | 单位(每行标识的数量,如果设为0,则根据yNumberPreUnitAutoMin和yNumberPreUnitAutoTimes自动计算单位) | 0 |
yNumberPerUnitAutoMin | number | 单位最小值 | 5 |
yNumberPerUnitAutoTimes | number | 单位数量翻倍量,如果单位最小值不能覆盖数据,则乘以翻倍量 | 2 |
onYTitleRender | func | Y轴数据渲染回调(传入index,单位,总量) | (idx, numberPreUnit, total) => total |
onXTitleRender | func | X轴数据渲染回调(仅传入index) | i => i |
xItemRate | number | 每几列渲染一个元素 | 2 |
xTitleRate | number | 每几列渲染一个列标题 | 4 |
xAxisTitle | string | X轴标题 | '' |
xAxisHeight | number | X轴高度 | 60 |
specialWidth | number | X轴右侧宽度 | 60 |
yAxisTitle | string | Y轴标题 | '' |
yAxisWidth | number | Y轴宽度 | 60 |
specialHeight | number | Y轴顶部高度 | 60 |
title | string | 标题 | '' |
style | style | 样式 | null |
titleWrapStyle | style | 标题容器样式 | null |
titleTextStyle | style | 标题样式 | null |
legendStyle | style | 图例样式 | null |
legendTextStyle | style | 图例文本样式 | null |
deactivedLegendStyle | style | 图例置灰样式 | null |
deactivedLegendTextStyle | style | 图例置灰样式 | null |
gridWrapStyle | style | 图表样式(包含横纵轴) | null |
axisTextStyle | style | 坐标轴文字样式 | null |