長條圖 - Pie Chart

1
<div id="pie-chart" class="chart"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import toPixel from '@superlanding/topixel'
import Theme from '../../assets/js/models/Theme'

export default function bindPieCharts() {

  const { PieChart } = window.beyond
  const dom = document.getElementById('pie-chart')

  if (! dom) {
    return () => {}
  }

  const onMouseOver = (mousePos, res) => {
    if (res) {
      chartMenu.innerHTML = `
        <div>${res.label}: ${res.value}</div>
      `
      chartMenu.style.left = toPixel(mousePos.x)
      chartMenu.style.top = toPixel(mousePos.y + 20)
      chartMenu.style.display = 'block'
    }
    else {
      chartMenu.style.display = 'none'
    }
  }

  const chartMenu = document.getElementById('chart-menu')
  const theme = Theme.get()
  const b = new PieChart(dom, {
    theme,
    onPieMouseOver: onMouseOver,
    onLabelMouseOver: onMouseOver
  })

  b.setData([
    { label: '1 個月內', value: 20 },
    { label: '3 個月內', value: 50 },
    { label: '6 個月內', value: 30 }
  ])

  const handleThemeChange = () => {
    const theme = Theme.get()
    b.setTheme({ theme })
    b.refresh()
  }
  document.addEventListener('beyond-theme-change', handleThemeChange)

  return function unbindPieCharts() {
    document.removeEventListener('beyond-theme-change', handleThemeChange)
    b.destroy()
  }
}