前言

今天要結合前面介紹過的長條圖和折線圖，可以同時看出兩個指標值隨時間變化的趨勢，第一個 y1 軸用長條圖表示，第二個 y2 軸用線表示，橫軸是時間的變化。

取得資料

到經濟部統計處下載今天的資料外銷訂單金額及年增率

整理資料

• 年分換成西元紀年
• 金額的千位逗號移除
• 換成 utf8 編碼的 csv 檔案
  

開始畫圖

• 參考 observable 範例 d3 bar-line chart
• 上傳整理後的資料，指定給變數 data

export_order_growth_rate1 = FileAttachment("export_order_growth_rate1.csv").csv()

data = Object.assign(d3.csvParse(await FileAttachment("export_order_growth_rate1.csv").text(), d3.autoType), {y1: "金額 (百萬美元)", y2: "年增率 (%)"})

補充
Object.assign()
d3.autoType

• 修改程式碼傳入的資料

chart = {
  // 建立 svg，指定尺寸
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  // 加入 group
  svg.append("g")
      .attr("fill", "orange")
      .attr("fill-opacity", 0.8)
    .selectAll("rect")
    .data(data) // 綁定資料
    .join("rect") // 加入矩形
      .attr("x", d => x(d.資料時間))
      .attr("width", x.bandwidth())
      .attr("y", d => y1(d.金額)) // 左邊 y 軸
      .attr("height", d => y1(0) - y1(d.金額)) // 由下往上畫出長條圖;

  // 加入直線
  svg.append("path")
      .attr("fill", "none")
      .attr("stroke", "currentColor")
      .attr("stroke-miterlimit", 1) // 調整線段轉折處圓角
      .attr("stroke-width", 5)
      .attr("d", line(data));

  // 加入 x 軸
  svg.append("g")
      .call(xAxis)
      .attr("font-size", 14);

  // 加入 y1 軸
  svg.append("g")
      .call(y1Axis)
      .attr("font-size", 14);

  // 加入 y2 軸
  svg.append("g")
      .call(y2Axis)
      .attr("font-size", 14);

  // 加入格線
  svg.append('g').call(yGrid)

  return svg.node();
}

• 定義折線圖、長條圖函式
  

• 定義 x, y 軸函式
  
  

• 指定圖寬度、邊界、格線、引用 d3
  

• 完成圖
  

結論

• 從一張圖可以同時看出十年內，每一年的外銷金額和年增率兩種變化趨勢。
• 如果把時間範圍拉長會產生太多的長條圖，圖形就不易辨識。