@abcum/ember-charts 中文文档教程

Question

ember-charts

用于在 Ember.js 应用程序中处理图表、时间线和网络的插件。

Usage

Installation

ember install @abcum/ember-charts

Introduction

ember-charts 插件为 wo 添加了功能 使用 chart.js 图表、vis.js 时间线和网络，实现分析数据、时间序列数据、事件数据和网络图形数据的复杂和高级可视化。

Examples

Charts

创建一个基本图表。 图表类型可以是以下之一：饼图、栏，线< /a>，雷达，气泡，甜甜圈， 极地区域。

{{chart-view type='bar' data=data}}

export default Ember.Controller.extend({
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
        }]
    }
})

并指定基本折线图的自定义选项。

{{chart-view type='line' data=data options=options}}

export default Ember.Controller.extend({
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }
})

有关配置选项的详细信息，请查看 Chart.js 文档 页面。

Timelines

创建一个基本的事件时间表。

{{#timeline-view as |t|}}
    {{t.item type='point' start=start content="Visited 'Home' page"}}
    {{t.item type='point' start=start content="Visited 'About Us' page"}}
{{/timeline-view}}

并指定对时间轴事件的操作。

{{#timeline-view on-timechange=(action 'timechange') as |t|}}
    {{t.item type='point' start=start content="Visited 'Home' page" on-select=(action 'select')}}
    {{t.item type='point' start=start content="Visited 'About Us' page" on-select=(action 'select')}}
{{/timeline-view}}

并为时间线指定自定义选项。 查看 Vis.js 文档了解详细的配置选项。

{{#timeline-view options=options as |t|}}
    ...
{{/timeline-view}}

import vis from 'vis.js';

export default Ember.Controller.extend({
    options: {
        start: vis.moment().subtract(6, 'months').format(),
        end: vis.moment().add(6, 'week').format(),
        width: '100%',
        height: '100%',
        align: 'left',
        orientation: 'top',
        showCurrentTime: true,
        autoResize: true,
        selectable: false,
        editable: false,
        zoomMin: 3600000,
        zoomMax: 31560000000,
    }
})

Timeline events

这些动作属性可以在时间轴上设置。

Attribute	Description
on-click	Called when the user clicks on the timeline.
on-dblclick	Called when the user double-clicks on the timeline.
on-contextmenu	Called when the user right-clicks on the timeline.
on-timechange	Called when the user is moving the timeline range.
on-timechanged	Called once when the user has finished moving the timeline range.
on-rangechange	Called when the user is dragging the custom time bar.
on-rangechanged	Called once when the user has finished dragging the custom time bar.

Timeline item events

可以在时间线项目上设置这些动作属性。

Attribute	Description
on-click	Called when the user clicks on an item.
on-dblclick	Called when the user double-clicks on an item.
on-contextmenu	Called when the user right-clicks on an item.
on-mouseover	Called when the user moves the mouse over an item.
on-mouseout	Called when the user moves the mouse away from an item.
on-select	Called when the user selects an item.

Networks

创建一个基本的图形网络。

{{#network-view as |n|}}
    {{n.node id='a' label="Alexander"}}
    {{n.node id='m' label="Marcus"}}
    {{n.node id='j' label="Jonathan"}}
    {{n.edge from='a' to='j' label="likes"}}
{{/network-view}}

并指定对网络节点/边缘的操作。

{{#network-view on-zoom=(action 'zoom') as |n|}}
    {{n.node id='a' label="Alexander" on-select=(action 'select')}}
    {{n.node id='m' label="Marcus" on-select=(action 'select')}}
    {{n.node id='j' label="Jonathan" on-select=(action 'select')}}
    {{n.edge from='a' to='j' label="likes" on-select=(action 'select')}}
{{/network-view}}

并为网络指定自定义选项。 查看 Vis.js 文档了解详细的配置选项。

{{#network-view options=options as |n|}}
    ...
{{/network-view}}

import vis from 'vis.js';

export default Ember.Controller.extend({
    options: {
        autoResize: true,
        width: '100%',
        height: '100%',
        interaction: {
            zoomView: false,
        },
        nodes: {
            shape: 'box',
            scaling: {
                min: 10,
                max: 30
            },
            font: {
                size: 12,
                face: 'Helvetica'
            },
        },
        edges: {
            scaling: {
                min: 5,
                max: 15,
            },
            font: {
                size: 10,
                face: 'Helvetica',
            },
        },
        physics: {
            stabilization: true,
            solver: 'repulsion',
            barnesHut: {
                damping: 0.5,
                avoidOverlap: 1,
            }
        },
    }
})

Network events

这些动作属性可以在网络上设置。

Attribute	Description
on-zoom	Called when the user changes the zoom level of the network
on-click	Called when the user clicks on the network.
on-dblclick	Called when the user double-clicks on the network.
on-contextmenu	Called when the user right-clicks on the network.

Network node/edge events

这些动作属性可以在网络节点或网络边缘上设置。

Attribute	Description
on-click	Called when the user clicks on an node or edge.
on-dblclick	Called when the user double-clicks on an node or edge.
on-contextmenu	Called when the user right-clicks on an node or edge.
on-select	Called when the user selects an node or edge.

Development

• make install (install bower and ember-cli dependencies)
• make upgrade (upgrade ember-cli to the specified version)
• make tests (run all tests defined in the package)