前言

又到了習題大亂鬥的時間，讓我們綜合之前所學，練習應用看看！

基礎題

當 html 為

<div id="chart"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.min.css" integrity="sha512-cznfNokevSG7QPA5dZepud8taylLdvgr0lDqw/FEZIhluFsSwyvS81CMnRdrNSKwbsmc43LtRd2/WMQV+Z85AQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js" integrity="sha512-FHsFVKQ/T1KWJDGSbrUhTJyS1ph3eRrxI228ND0EGaEp6v4a/vGwPWd3Dtd/+9cI7ccofZvl/wulICEurHN1pg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.18/c3.min.js" integrity="sha512-bW79RVtvrrTS2QzmDsJeh62Nt4b/RjYlYvi2iEmkXPhzzbXMx69JT/zHgiGcL1Tk5nkLMTF6xkEUuynTkdC9PQ==" crossorigin="anonymous"></script>

請用 newMonthMoney 跑 forEach，依序將值增加到 monthMoney 陣列後方，來改寫下方讓折線圖能順利顯示。

var monthMoney = ['總公司每月討債業績',500000, 1300000,2000000];
var newMonthMoney = ["300000","500000"];
//以上程式碼不可更動

// 請在此處新增程式碼

// 以下程式碼不可更動
var realData= monthMoney;
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        realData,
        ['黑道大哥業績',30000,100000,300000]
      ]
    }
});

有想到答案嗎？要公布囉！

// 請在此處新增程式碼
newMonthMoney.forEach(function(item){
  monthMoney.push(item);
})

進階題

再試一題吧！ html 的部分一樣， js 的部分變為下方的程式碼，請用 serverData 跑 forEach，依序將組好的陣列增加到 data 陣列後方，讓折線圖正常顯示。

var serverData = [
  {
    "name":"總公司每月討債業務",
    "seasonOneData":[500000, 1300000],
    "seasonTwoData":[2000000,300000,500000]

  },{
    "name":"黑道大哥業績",
    "seasonOneData":[30000,100000],
    "seasonTwoData":[300000,50000,100000]
  }
]
var data=[];
//以上程式碼不可更動

// 請在此處新增程式碼

// 以下程式碼不可更動

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: data
    }
});

小提示： data 要變成下面這樣喔！

data = [
        ["總公司每月討債業務",500000,1300000,2000000,300000,500000],
        ["黑道大哥業績",30000,100000,300000,50000,100000]
]

寫好了嗎？這題需要轉個彎：

// 請在此處新增程式碼
serverData.forEach(function(item){
  let dataStr=[]; 
  dataStr.push(item.name)
  item.seasonOneData.forEach(function(item){
    dataStr.push(item)
  })
  item.seasonTwoData.forEach(function(item){
    dataStr.push(item)
  })  
  data.push(dataStr);
})

不知道有沒有人寫成這樣的？然後發現圖表長的很怪，用 console.log 一檢查發現，所有東西的確都推進去了，但都推到同一筆陣列(抱頭)

serverData.forEach(function(item){
  data.push(item.name,item.seasonOneData[0],item.seasonOneData[1]);
  data.push(item.seasonTwoData[0],item.seasonTwoData[1],item.seasonTwoData[2]);
})

是的，要怎麼讓它推的時候分兩筆推呢？讓我們回來看正確的寫法第二行。沒錯，就是乾脆再另外宣告一個 dataStr ，在迴圈中宣告另一個陣列，整好再丟進 data ，才不會怎麼跑都是一筆陣列。這種作法有點像 13 forEach 中我們練習的最後一題，簡稱愛的造橋術...沒有啦我亂講的。在怎樣都無法連接的時候，可以宣告空字串或空陣列，幫助連接唷！

希望今天的練習對你有幫助！那我們明天見，掰掰！

學習與參考資料

JS 學徒特訓班教學影片及練習題 24-25 關