Line Chart
Line Chart
說明
1.依賴於 D3.js
安裝 Install
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
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
Repository