honeycomb-chart
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

honeycomb-chart

蜂窝图

NPM JavaScript Style Guide

Install

npm install --save honeycomb-chart

Usage

import React, { Component } from 'react'
import { HoneycombChart } from 'honeycomb-chart'
import 'honeycomb-chart/dist/index.css'
 
class Example extends Component {
  render() {
    return <HoneycombChart className='honeycomb-chart' option={option} />
  }
}

Option

  • margin 图表四周空白区域大小,可以为数字和百分数
    • top
    • left
    • right
    • bottom
  • honeycomb 蜂窝配置
    • maxRadius 最大半径
    • minRadius 最小半径
    • distance 蜂窝间距占半径比例,小数表示
  • group
    • honeycombNum 每个组每一行蜂窝数目
    • lineGroupNum 图表每一行图表组数
    • titleHeight 标题高度
  • series Array 数据
    • name 组名称
    • data 蜂窝数据
      • name 蜂窝名称
      • value 值
      • color 颜色
      • line Array 变化数据
        • time 时间戳
        • value 值
option: {
      margin: {
        top: '5%',
        left: '5%',
        right: '5%',
        bottom: '5%'
      },
      honeycomb: {
        maxRadius: 100,
        minRadius: 10,
        distance: 0.06
      },
      groups: {
        honeycombNum: 10,
        lineGroupNum: 3,
        titleHeight: 20
      },
      series: [
        {
          name: 'count',
          data: [
            {
              name: 'Pass of.',
              value: 1,
              color: '#1C7BDC',
              line: [{
                time: 1589791385130,
                value: 0,
              }, {
                time: 1589791404743,
                value: 1
              }]
            },
            {
              name: 'Whole.',
              value: 1,
              color: '#1C7BDC',
              line: []
            }
          ]
        }
      ]
    }

License

MIT © caohuilin

Readme

Keywords

none

Package Sidebar

Install

npm i honeycomb-chart

Weekly Downloads

2

Version

1.1.2

License

MIT

Unpacked Size

129 kB

Total Files

12

Last publish

Collaborators

  • caohuilin