https://github.com/ehanlin/line-chart
https://github.com/ehanlin/line-chart
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ehanlin/line-chart
- Owner: eHanlin
- License: mit
- Created: 2014-10-13T09:59:36.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-12-08T02:47:40.000Z (over 11 years ago)
- Last Synced: 2025-03-13T13:19:55.663Z (over 1 year ago)
- Language: JavaScript
- Size: 188 KB
- Stars: 0
- Watchers: 10
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Line Chart
## 說明
1.依賴於 D3.js
### 安裝 Install
1. sudo npm install d3
### 資料結構 Data structure
```
var data = [
{title: "寫作能力", tTitle: "精熟平均", bTitle: "基礎平均", rightRate: 0.2, basicRate:0.5, skilledRate: 0.7},
{title: "形音義", tTitle: "精熟平均", bTitle: "基礎平均", rightRate: 0.8, basicRate:0.6, skilledRate: 0.9},
{title: "詞句成語", tTitle: "精熟平均", bTitle: "基礎平均", rightRate: 0.7, basicRate:0.5, skilledRate: 0.8},
{title: "java", tTitle: "精熟平均", bTitle: "基礎平均", rightRate: 0.01, basicRate:0.5, skilledRate: 0.8},
{title: "java", tTitle: "精熟平均", bTitle: "基礎平均", rightRate: 0.02, basicRate:0.5, skilledRate: 0.5},
{title: "java", tTitle: "精熟平均", bTitle: "基礎平均", rightRate: 1, basicRate:0.5, skilledRate: 0.8}
];
```
### 範例 examp
```html
radar chart
#box{
width: 100%;
height: 610px;
}
var data = [
{title: "寫作能力", tTitle: "精熟平均", bTitle: "基礎平均", rightRate: 0.2, basicRate:0.5, skilledRate: 0.7},
{title: "形音義", tTitle: "精熟平均", bTitle: "基礎平均", rightRate: 0.8, basicRate:0.6, skilledRate: 0.9},
{title: "詞句成語", tTitle: "精熟平均", bTitle: "基礎平均", rightRate: 0.7, basicRate:0.5, skilledRate: 0.8},
{title: "詞句成語2", tTitle: "精熟平均", bTitle: "基礎平均", rightRate: 1, basicRate:0.5, skilledRate: 0.8}
];
window.LineChart.draw("#lineBox", data);
window.LineChart.draw("#lineBox", data);
```
### 設定 Configure
```javascript
```