1.1.4 • Published 6 years ago

stackedchart v1.1.4

Weekly downloads
1
License
ISC
Repository
-
Last release
6 years ago

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

属性类型说明默认值
dataSourcearray数据源,数组元素类型为object,可配置id,data,name,backgroundColor[]
yCountnumber行数12
yTitleRatenumber每几行作为一个行标题2
yNumberPerUnitnumber单位(每行标识的数量,如果设为0,则根据yNumberPreUnitAutoMin和yNumberPreUnitAutoTimes自动计算单位)0
yNumberPerUnitAutoMinnumber单位最小值5
yNumberPerUnitAutoTimesnumber单位数量翻倍量,如果单位最小值不能覆盖数据,则乘以翻倍量2
onYTitleRenderfuncY轴数据渲染回调(传入index,单位,总量)(idx, numberPreUnit, total) => total
onXTitleRenderfuncX轴数据渲染回调(仅传入index)i => i
xItemRatenumber每几列渲染一个元素2
xTitleRatenumber每几列渲染一个列标题4
xAxisTitlestringX轴标题''
xAxisHeightnumberX轴高度60
specialWidthnumberX轴右侧宽度60
yAxisTitlestringY轴标题''
yAxisWidthnumberY轴宽度60
specialHeightnumberY轴顶部高度60
titlestring标题''
stylestyle样式null
titleWrapStylestyle标题容器样式null
titleTextStylestyle标题样式null
legendStylestyle图例样式null
legendTextStylestyle图例文本样式null
deactivedLegendStylestyle图例置灰样式null
deactivedLegendTextStylestyle图例置灰样式null
gridWrapStylestyle图表样式(包含横纵轴)null
axisTextStylestyle坐标轴文字样式null
1.1.4

6 years ago

1.1.0

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago