Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/caohuilin/d3_learning_2
https://github.com/caohuilin/d3_learning_2
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/caohuilin/d3_learning_2
- Owner: caohuilin
- Created: 2020-05-01T07:25:28.000Z (over 4 years ago)
- Default Branch: hexagon
- Last Pushed: 2023-01-05T19:49:15.000Z (almost 2 years ago)
- Last Synced: 2024-10-05T08:20:18.643Z (about 1 month ago)
- Language: TypeScript
- Size: 858 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hexagon Chart
> 使用 d3.js 实现一个使用六边形来展示数据状态的图表。
该图表核心实现一个 HexagonChart 类，实现该类，并调用其`render`方法，将所需配置数据传入即可。
## 使用方式
废话不说，直接上代码
```js
const hexagonChart = new HexagonChart(dom)
hexagonChart.render(option)
```
### dom
放置该图表的节点
### option
图表配置
```json
{
"margin": {
"top": 10,
"left": 10,
"right": 10,
"bottom": 10
},
"series": [
{
"name": "series1",
"data": [
{
"name": "info",
"value": 12,
"color": "red",
"line": [
{
"time": 1588486390000,
"value": 7,
},
{
"time": 1588486420000,
"value": 9,
},
{
"time": 1588486840000,
"value": 12,
}
]
},
{
"name": "info2",
"value": 13,
"color": "green",
"line": [
{
"time": 1588486390000,
"value": 17,
},
{
"time": 1588486420000,
"value": 5,
},
{
"time": 1588486840000,
"value": 13,
}
]
},
...
]
}
]
}
```