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