stackedchart

1.1.4 • Public • Published

stackedchart

npm npm

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;

Mo.zhou

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

Readme

Keywords

Package Sidebar

Install

npm i stackedchart

Weekly Downloads

2

Version

1.1.4

License

ISC

Last publish

Collaborators

  • mo.zhou