1.1.4 • Published 6 years ago
stackedchart v1.1.4
stackedchart
React Native stacked chart component.
Start
npm install stackedchart --save
Use
import React, {
Component,
} from 'react';
import StackedChart from 'stackedchart';
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)',
}];
function Demo(props) {
return
<StackedChart
dataSource={gridData}
style={{ width: 600, height: 600 }}
title="圣诞节"
xAxisTitle="人工"
yAxisTitle="时间"
/>;
}
export default Demo;
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 |