目前打算使用chart.js畫雷達圖可以透過點擊團隊的下拉式選單,畫出底下全部成員分數的雷達圖。因為每個團隊底下的人數不一樣所以每次產生的資料集數量也會不同,想要實現看能不能動態的新增。
//後端會先從db撈出資料進行處理存到下面類別的模型裡
public class Root
{
public List<string> labels { get; set; }
public List<string> EmpName { get; set; }
public List<List<int>> EmpScore { get; set; }
}
//存完的樣子
{
"labels": [
"資產",
"軟體",
"機房",
"電信",
"廠區",
"直播",
"行政",
],
"EmpName":["小明","小光","小黃"],
"EmpScore":[[2, 10, 4, 2,6,8,3,1],[2, 4, 4, 2, 9, 2, 10],[3, 6, 3, 5, 7, 4, 6,5]]
}
雷達圖所需json的格式
const data1={
labels: [標籤list],
datasets: [{
label:第一個人,
data: [第一個人的分數list],
fill:false,
backgroundColor: '#fff',
borderColor: 'rgb(255, 99, 132)',
},{
label:第二個人,
data: [第二個人的分數list],
fill:false,
backgroundColor: '#fff',
borderColor: 'rgb(255, 99, 132)',
},
.....接續接下去
]
}
<canvas id="myChart" width="300" height="100"></canvas>
//chart.js畫雷達圖所需的資料會是以下的樣子,下面有3人如果是寫死的話可以將下面的datasets[0].label=obj.EmpName[0]這樣的方式去給值,但目前感覺只有labels可以這樣做;datasets裡面的無法原因是因為每個團隊不一定是3人所以可能會增加或減少所以也不能寫死,另外還有顏色的設定的考量可能先預先把顏色的代碼存成字串去跑?還沒想到
const data1={
labels: ['資產', '軟體', '機房', '電信','廠區','直播','行政'],
datasets: [{
label:'小明',
data: [2, 10, 4, 2,6,8,3,1],
fill:false,
backgroundColor: '#fff',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
},{
label: '小光',
data: [2, 4, 4, 2, 9, 2, 10],
fill: false,
backgroundColor: '#fff',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235,0.1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
},{
label: '小黃',
data: [3, 6, 3, 5, 7, 4, 6,5],
fill: false,
backgroundColor: '#fff',
borderColor: 'rgb(72, 209, 204)',
pointBackgroundColor: 'rgb(72, 209, 204,0.1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(72, 209, 204)'
}]
//透過呼叫showDialog()畫圖
function showDialog() {
var ctx = document.getElementById('myChart');
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data1,
options: options
});
這是透過外部新增的方式
for迴圈自己寫.....{
const DataSet = {
type: 'line',
yAxisID: 'B',
lineTension: 0.3, //曲線幅度
label: label[i],
backgroundColor: '#fce247',
borderColor: '#fce247', ,
data: data[i],
fill: false,
pointRadius: 3,
裡面內容改成你要的
}
myLineChart.data.datasets.push(DataSet);
myLineChart.update();
}
ddx大你好但我回傳的是物件我用foreach的方式的話,是用obj.的方式選擇我的屬性去跑foreach去加但我這樣會有其中一項沒辦法加?還是其實有別的寫法
obj.EmpName.forEach(function(item){
const DataSet1 = {
label:item,
data: 這裡沒辦法放,
fill:false,
backgroundColor: '#fff',
borderColor: 'rgb(255, 99, 12)',
pointBackgroundColor: 'rgb(255, 99, 12)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 12)'
}
})
應該是這樣吧,我不確定
obj.EmpName.forEach(function(item,index){
const DataSet1 = {
label:item.label,
data: item.data[index],
........
})