長條圖 - Bar Chart

1
<div id="bar-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
53
54
55
56
57
58
59
60
61
62
63
64
65
import throttle from 'lodash.throttle'
import toPixel from '@superlanding/topixel'
import Theme from '../../assets/js/models/Theme'

export default function bindBarCharts() {

  const { BarChart } = window.beyond
  const dom = document.getElementById('bar-chart')

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

  const chartMenu = document.getElementById('chart-menu')
  const theme = Theme.get()

  const b = new BarChart(dom, {
    theme,
    onBarMouseOver(mousePos, res) {
      if (res) {
        const { index, bar } = res
        chartMenu.innerHTML = `
          <div>index: ${index}</div>
          <div>時間: ${bar.label}</div>
          <div>數字: ${bar.value}</div>
        `
        chartMenu.style.left = toPixel(mousePos.x)
        chartMenu.style.top = toPixel(mousePos.y + 20)
        chartMenu.style.display = 'block'
      }
      else {
        chartMenu.style.display = 'none'
      }
    }
  })

  b.setData([
    { label: '1 個月內', value: 0.8 },
    { label: '3 個月內', value: 1.7 },
    { label: '6 個月內', value: 1.1 }
  ])

  let domWidth = dom.offsetWidth

  const handleResize = throttle(() => {
    if (dom.offsetWidth !== domWidth) {
      b.refresh()
    }
    domWidth = dom.offsetWidth
  }, 300)
  window.addEventListener('resize', handleResize)

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

  return function unbindBarCharts() {
    window.removeEventListener('resize', handleResize)
    document.removeEventListener('beyond-theme-change', handleThemeChange)
    b.destroy()
  }
}