43 lines
1.1 KiB
YAML
43 lines
1.1 KiB
YAML
name: Chart
|
|
|
|
constructor:
|
|
signature: new Chart(canvas, options)
|
|
options:
|
|
type: line, bar, or pie. Default is line.
|
|
data: Chart.js data object or source object array.
|
|
options: Chart.js options object.
|
|
map: "{ labels, values, label } for source object arrays."
|
|
|
|
component:
|
|
attributes:
|
|
type: line, bar, or pie.
|
|
state:
|
|
data: Chart.js data object or source object array.
|
|
options: Chart.js options.
|
|
map: "{ labels, values, label }"
|
|
property:
|
|
chartInstance: Underlying Chart instance.
|
|
|
|
methods:
|
|
update: Update optional data and redraw.
|
|
destroy: Destroy the underlying Chart.js instance.
|
|
|
|
rules:
|
|
- Give the Chart container an explicit height.
|
|
- Use map only when data is an array of objects.
|
|
- Chart destroys its Chart.js instance when the component unloads.
|
|
|
|
example: |
|
|
<Chart id="sales" type="bar"></Chart>
|
|
<script>
|
|
const chart = document.querySelector('#sales')
|
|
chart.state.data = [
|
|
{ month: 'Jan', amount: 12 },
|
|
{ month: 'Feb', amount: 18 }
|
|
]
|
|
chart.state.map = { labels: 'month', values: 'amount' }
|
|
</script>
|
|
|
|
tests:
|
|
- apigo.cc/web/chart/test/all.spec.js
|