กราฟ

danger

🚧 ส่วนนี้ยังมีเนื้อหาไม่ครบ 🚧

เราสามารถใส่รูปภาพของกราฟหรือตารางเข้าไปในบทความได้เช่นเดียวกับการใส่รูปภาพทั่วไป แต่เว็บไซต์ PIER สามารถใส่ interactive chart ได้ ซึ่งจะทำให้บทความดูน่าติดตาม และอาจจะเป็นประโยชน์กับผู้อ่านมากขึ้น

กราฟอย่างง่าย

ถ้าเรามีข้อมูลง่าย ๆ (ไม่ซับซ้อน เช่น มีทั้งกราฟแท่งและกราฟพื้นที่อยู่ด้วยกัน ต้องการกำหนดสี ฯลฯ) เราสามารถทำกราฟอย่างง่าย ๆ ได้ตามตัวอย่างข้างล่าง

กราฟเส้น / พื้นที่ / แท่ง

ส่วนนี้จะพูดถึงกราฟประเภทที่มีแกนนอนและแกนตั้ง ไม่ว่าจะเป็นประเภทเส้น พื้นที่ หรือแท่ง โดยจะใช้ component ชื่อ SimpleChart มี attributes ต่อไปนี้

• type ประเภทของกราฟ เลือกได้ระหว่าง
  • spline กราฟเส้นแบบโค้ง (ถ้าไม่กำหนด จะใช้ type นี้)
  • line กราฟเส้น
  • areaspline กราฟพื้นที่แบบโค้ง
  • area กราฟพื้นที่
  • column กราฟแท่งแนวตั้ง
  • bar กราฟแท่งแนวนอน
• data ข้อมูลที่ต้องการแสดง
  • กรณีที่มี series เดียว ใช้ array ของตัวเลขได้เลย (เช่น [1, 5, 3])
  • กรณีที่มีหลาย series ใช้ array ของ object ได้ (เช่น [{name: 'First', data: [1, 5, 3]}, {name: 'Second', data: [2, 4, 6]}])
• start จุดเริ่มต้นของแกน x (ถ้าไม่กำหนด จะใช้ 0 แทน)
• interval บอกว่าแต่ละจุดข้อมูลห่างกันเท่าไหร่ในแกน x
• isDate บอกว่าข้อมูลในแกน x เป็นวันที่หรือไม่ (ถ้าไม่กำหนด จะใช้เป็นตัวเลข)
• dateUnit กรณีที่ข้อมูลในแกน x เป็นวันที่ ใช้กำหนดความถี่ของข้อมูล สามารถกำหนดเป็น day หรือ month (ถ้าไม่กำหนด จะเป็น month)
• categories ชื่อของแต่ละจุดบนแกน x (กรณีที่ไม่ได้กำหนด start เท่านั้น)
• xtitle ชื่อแกน x (ถ้าไม่มีจะไม่แสดง)
• ytitle ชื่อแกน y (ถ้าไม่มีจะไม่แสดง)
• showLegend ให้แสดง legend หรือไม่ (ถ้าไม่กำหนด จะแสดงต่อเมื่อมีหลาย series เท่านั้น)
• stacking กรณีที่ type เป็นแบบพื้นที่หรือแบบแท่ง กำหนดว่าให้แสดงกราฟแบบ stacked หรือไม่ ถ้าไม่กำหนด จะแสดงข้างกัน หรือสามารถเลือกระหว่าง
  • normal แสดงแบบ stacked
  • percent แสดงแบบ stacked ในรูปแบบสัดส่วน ให้รวมกันได้ 100

ตัวอย่างการใช้งาน (สามารถปรับแก้ code ด้านล่างเพื่อดูผลได้เลย)

• Numerical
• Date
• Categorical

Live Editor

<SimpleChart type="spline" data={[ { name: 'First', data: [1, 5, 3, 2, 9] }, { name: 'Second', data: [2, 4, 6, 10, 14] } ]} start={2020} // interval={2} // ใส่ตรงนี้ถ้าข้อมูลห่างกันเป็น 2 ปี />

<SimpleChart
  type="spline"
  data={[
    {
      name: 'First',
      data: [1, 5, 3, 2, 9]
    },
    {
      name: 'Second',
      data: [2, 4, 6, 10, 14]
    }
  ]}
  start={2020}
  // interval={2} // ใส่ตรงนี้ถ้าข้อมูลห่างกันเป็น 2 ปี
/>

Result

Loading...

กราฟวงกลม

อันนี้จะง่ายกว่าอันก่อนหน่อย มี attributes แค่สองอัน คือ

• categories กำหนดชื่อของข้อมูลต่าง ๆ
• data กำหนดค่าของ category ต่าง ๆ

Live Editor

<SimplePie categories={['A', 'B', 'C']} data={[5, 30, 14]} />

<SimplePie
  categories={['A', 'B', 'C']}
  data={[5, 30, 14]}
/>

Result

Loading...

แผนที่

สำหรับแผนที่ที่เป็นสี ๆ (เรียกว่า choropleth map) ใช้ component ชื่อว่า SimpleMap ได้ โดยมี attributes ดังนี้

• map ถ้าต้องการแสดงประเทศไทยอย่างเดียว ใช้ map="th" ถ้าต้องการแสดงทั่วโลก ใช้ map="world"
• data ข้อมูลที่ต้องการแสดง ใช้ array ของ array โดยแต่ละ array ย่อย จะมีสองค่า คือ
  • รหัสประเทศ (ISO 3166-1 alpha-2 code) ตัวเล็ก หรือถ้าเป็นแผนที่ประเทศไทย ใช้ HASC code เช่น th-bm
  • ค่าที่ต้องการแสดง
• name ชื่อ series (ถ้าไม่กำหนด จะเขียนว่า "ข้อมูล")

Live Editor

<SimpleMap map="world" data={[ ['th', 10], ['us', 20], ['cn', 30], ]} />

<SimpleMap
  map="world"
  data={[
    ['th', 10],
    ['us', 20],
    ['cn', 30],
  ]}
/>

Result

Loading...

กรณีที่ข้อมูลเป็น categorical ใช้ SimpleMapCategorical แทน โดยมี attributes คล้ายกันกับ SimpleMap แต่ data เป็นตามตัวอย่างด้านล่างแทน

danger

ตรงนี้ยังทำไม่เสร็จฮะ

Live Editor

<SimpleMapCategorical map="world" data={[ { name: 'Group A', data: ["th", "id", "my"], }, { name: 'Group B', data: ["us", "ca", "mx"], }, ]} />

<SimpleMapCategorical
  map="world"
  data={[
    {
      name: 'Group A',
      data: ["th", "id", "my"],
    },
    {
      name: 'Group B',
      data: ["us", "ca", "mx"],
    },
  ]}
/>

Result

Loading...

กราฟที่ซับซ้อนขึ้น

ถ้าต้องการทำกราฟที่ซับซ้อนขึ้น จะต้องใช้ library ที่มีอยู่ โดยเว็บไซต์ PIER มี graph library ให้เลือกใช้ 3 อันด้วยกัน แต่ละ library ก็มีจุดเด่นต่างกัน ซึ่งสามารถเลือกใช้ได้ทั้งหมด

• Highcharts มีจุดเด่นในการแสดงข้อมูลที่เป็น time series
• Chart.js เป็น library ที่ใช้ค่อนข้างง่าย เหมาะกับการใช้แสดงผลกราฟที่ไม่ซับซ้อนมาก
• Plotly เป็น library ที่มีประเภทของกราฟเกือบจะเยอะที่สุด และยังมี library สำหรับ python ด้วย

ทั้งสาม libraries แม้จะมีรูปแบบที่ต่างกันเล็กน้อย แต่ default settings ถูกตั้งค่าให้ทั้งสาม libraries แสดงผลออกมาคล้ายกันที่สุด

tip

ถ้าต้องการดูตัวอย่าง สามารถกดที่ชื่อ library ด้านบนเพื่อดูตัวอย่าง code ได้เลย

• Highcharts
• Plotly
• Chart.js

Live Editor

<LazyHighcharts options={{ chart: { height: 300, }, series: [ { name: 'First Series', // ชื่อ series type: 'line', // ประเภทกราฟ data: [2, 6, 3, 2, 7], // ข้อมูลแกน y zIndex: 2, }, { name: 'Second Series', type: 'column', data: [2, 5, 3, 6, 1], zIndex: 1, }, ], }} />

<LazyHighcharts
  options={{
    chart: {
      height: 300,
    },
    series: [
      {
        name: 'First Series',   // ชื่อ series
        type: 'line',        // ประเภทกราฟ
        data: [2, 6, 3, 2, 7],     // ข้อมูลแกน y
        zIndex: 2,
      },
      {
        name: 'Second Series',
        type: 'column',
        data: [2, 5, 3, 6, 1],
        zIndex: 1,
      },
    ],
  }}
/>

Result

Loading...