iT邦幫忙

0

Javascript在物件中可以根據團體底下的成員數量動態FOR loop新增資料,轉成符合圖表json格式的資料

  • 分享至 

  • xImage

目前打算使用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
});
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
ddx
iT邦研究生 5 級 ‧ 2021-12-17 15:55:33

這是透過外部新增的方式

    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)'
        }
})
ddx iT邦研究生 5 級 ‧ 2021-12-17 17:42:09 檢舉

應該是這樣吧,我不確定
obj.EmpName.forEach(function(item,index){
const DataSet1 = {
label:item.label,
data: item.data[index],
........
})

你要放分數的話要改成obj.EmpScore去跑foreach至少我要這樣才能

ddx iT邦研究生 5 級 ‧ 2021-12-20 08:25:21 檢舉

那把foreach換成for迴圈呢?
obj[i].EmpName,obj[i].EmpScore
obj.EmpName.forEach
老實說我不知道裡面是什麼東西,哈哈

我目前改成先寫死,直接先各別建datasets裡的定義5-12人的物件用switch的方式判斷人數在配對給值

我要發表回答

立即登入回答