1.1.4 • Published 8 years ago
stackedchart v1.1.4
stackedchart
React Native stacked chart component.
Start
npm install stackedchart --saveUse
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 |