https://github.com/fe6/sparklines

迷你图
https://github.com/fe6/sparklines

Last synced: 4 days ago
JSON representation

迷你图

• Host: GitHub
• URL: https://github.com/fe6/sparklines
• Owner: fe6
• License: mit
• Created: 2019-11-13T11:01:59.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-07-20T17:27:36.000Z (over 2 years ago)
• Last Synced: 2023-03-01T20:22:11.431Z (over 1 year ago)
• Language: TypeScript
• Homepage: https://fe6.github.io/sparklines/
• Size: 409 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sparklines

> 迷你图

## Status: Pre-Alpha.

- 公共参数

| 完成度 | 描述 | 参数 | 类型 | 可选值 | 默认值 | 

| ----- | ---- | ---- | ---- | ---- | ---- |

| ☑ | 设置宽度 | width | number | 无 | 'auto' |

| ☑ | 设置高度 | height | number | 无 | 'auto' |

| ☑ | 设置类型 | type | number | `line` | 'auto' |

| ☑ | 数据可配置 | values | number[] | 无 | [] |

| ☑ | 图表内上下左右的边距 | padding | number | 无 | 0 |

| ☐ | 设置为true可禁用所有迷你图交互 | disableInteraction | boolean | 无 | false |

| ☐ | 如果为true，则提供给图的y值将被裁剪为介于chartRangeMin和chartRangeMax之间-默认情况下，chartRangeMin / Max仅确保图表至少跨越了该值范围，但不对其进行限制 | chartRangeClip | boolean | 无 | false |

| ☐ | 指定用于图表的Y值范围的最小值-默认为所提供的最小值 | chartRangeMin | number | 无 | 无 |

| ☐ | 指定用于图表的Y值范围的最大值-默认为所提供的最大值 | chartRangeMax | number | 无 | 无 |

- 折线图(`type = 'line'`)



| 完成度 | 描述 | 参数 | 类型 | 可选值 | 默认值 | 

| ----- | ---- | ---- | ---- | ---- | ---- |

| ☑ | 线的宽度 | lineWidth | number | 无 | 1 |

| ☑ | 线的颜色，为空的时候没有颜色，默认： 佛晓蓝7 | lineColor | string | 无 | '#096dd9' |

| ☑ | 填充的颜色，为空的时候没有颜色，默认：佛晓蓝2 | fillColor | string | 无 | '#bae7ff' |

| ☑ | 所有点标记的半径，以像素为单位 | spotRadius | number | 无 | 1 |

| ☑ | 图表中每个值的默认宽度均为3像素 | defaultPixelsPerValue | number | 无 | 3 |

| ☑ | 最终值标记的CSS颜色。设置为空字符串将其隐藏，默认： 薄暮6 | spotColor | string | 无 | '#f5222d' |

| ☑ | 为最小值显示的标记的CSS颜色。设置为false或空字符串以将其隐藏，默认： 薄暮6 | minSpotColor | boolean | 无 | '#f5222d' |

| ☑ | 为最大值显示的标记的CSS颜色。设置为false或空字符串以将其隐藏，默认： 薄暮6 | maxSpotColor | boolean | 无 | '#f5222d' |

| ☐ | 指定当鼠标悬停在值上时显示在该值上的斑点的颜色。设置为空以禁用。 | highlightSpotColor | string | 无 | '#5f5' |

| ☐ | 为鼠标悬停时通过值显示的垂直线指定颜色。设置为null以禁用。 | highlightLineColor | string | 无 | '#f22' |

- 柱状图(`type = 'bar'`)



| 完成度 | 描述 | 参数 | 类型 | 可选值 | 默认值 | 

| ----- | ---- | ---- | ---- | ---- | ---- |

| ☑ | 正数的颜色， 默认： 薄暮 | barColor | string | 无 | '#f5222d' |

| ☑ | 负数的颜色， 默认：极光绿 | negBarColor | string | 无 | '#52c41a' |

| ☑ | 0 的颜色，默认：灰色 | zeroColor | string | 无 | '#bfbfbf' |

| ☑ | 柱子的宽度 | barWidth | number | 无 | 4 |

| ☑ | 柱子的间距 | barSpacing | number | 无 | 1 |

| ☑ | 是否正负数两级分开显示 | zeroAxis | boolean | 无 | true |

- 饼图(`type = 'pie'`)



| 完成度 | 描述 | 参数 | 类型 | 可选值 | 默认值 | 

| ----- | ---- | ---- | ---- | ---- | ---- |

| ☑ | 围绕整个饼图绘制的边框宽度（以像素为单位） | borderWidth | number | 无 | 0 |

| ☑ | 以度为单位的角度以偏移第一个切片，尝试 -90 或 90 | offset | number | 无 | 0 |

| ☑ | 用于饼图的CSS颜色数组，默认： [日暮, 青柠, 法式洋红, 佛晓蓝, 薄暮, 金盏花, 极光绿, 极客蓝, 火山, 日出, 明青, 酱紫] | sliceColors | string[] | 无 | ['#fa8c16','#a0d911','#eb2f96','#1890ff', '#f5222d','#faad14', '#52c41a', '#2f54eb', '#fa541c','#fadb14','#13c2c2','#722ed1',] |

| ☑ | 用于绘制饼图边框的CSS颜色 | borderColor | string | 无 | '#000' |