前言
在前端开发中，图表是不可或缺的一部分。而 Highcharts 是一款强大的图表库，不仅能够绘制基础的图表，还支持高级的交互和动画效果。在 Ember.js 中使用 Highcharts，除了官方推荐的 Ember Highcharts 外，我们还可以使用一个更加强大的 npm 包 —— ember-highcharts-extra。
本文将介绍如何使用 ember-highcharts-extra 包，创建更加复杂和丰富的 Highcharts 图表。此外，我们还将讨论该包的基本 API。
安装
使用 ember-highcharts-extra 包，我们需要先安装 Highcharts。
npm install highcharts --save
接下来，我们需要安装 ember-highcharts-extra 包。
ember install ember-highcharts-extra
基本 API
使用组件
ember-highcharts-extra 提供了一个组件 high-charts，用于在 Ember 应用中展示 Highcharts 图表。
{{high-charts options=chartOptions}}其中，options 是一个 Highcharts 的配置对象。在 chartOptions 中，我们可以指定图表的类型、数据、样式等。
混合类
ember-highcharts-extra 还提供了一个混合类 HighChartsMixin，用于扩展 Ember 组件的 Highcharts 功能。
import HighChartsMixin from 'ember-highcharts-extra/mixins/high-charts-mixin';
export default Ember.Component.extend(HighChartsMixin, {
// ...
});通过混合类，我们可以访问 Highcharts 的一些事件，如 load、redraw 等。此外，还可以动态修改图表的配置参数。
-- -------------------- ---- -------
------ --------------- ---- --------------------------------------------------
------ ------- --------------------------------------- -
------------- ------------------------- -
------ -
------ -
----- --------
--
------ -
----- -------- -------
------ -
----------- ------
-
--
------ -
----------- -
------
------
------
------
------
------
------
------
------
------
------
-----
-
--
------ -
------ -
----- -------
-
--
------- --
----- --------
----- ----- ---- ---- ---- ---- ---- ---- ---- ---- ----- ----- -----
--
--
---
------ -
--------------------------
------------------------------------ -
------- -
------------ --
------ ---------
-
---
-
---Helper
除了组件和混合类，ember-highcharts-extra 也提供了一些 helper。
{{high-charts/drilldown series=drilldownSeries chart=chart}}high-charts/drilldown Helper 用于创建 Highcharts Drilldown。其中，drilldownSeries 是 Highcharts 钻取的序列，而 chart 是 Highcharts 的配置对象。
扩展
如果你想在 ember-highcharts-extra 中添加自己的 Highcharts 扩展功能，可以使用 HighChartsExtra 对象。
import { HighChartsExtra } from 'ember-highcharts-extra';
HighChartsExtra.addSymbol('logo', function(x, y, w, h, options) {
// Your code here
});示例
下面是一个简单的示例，展示了如何使用 ember-highcharts-extra 创建一个基本的 Highcharts 图表。
{{! templates/application.hbs }}
{{high-charts options=chartOptions}}-- -------------------- ---- -------
------ --------------- ---- --------------------------------------------------
------ ------- --------------------------------------- -
------------- ------------------------- -
------ -
------ -
----- --------
--
------ -
----- -------- -------
------ -
----------- ------
-
--
------ -
----------- -
------
------
------
------
------
------
------
------
------
------
------
-----
-
--
------ -
------ -
----- -------
-
--
------- --
----- --------
----- ----- ---- ---- ---- ---- ---- ---- ---- ---- ----- ----- -----
--
--
---
------ -
--------------------------
------------------------------------ -
------- -
------------ --
------ ---------
-
---
-
---结论
ember-highcharts-extra 是一个强大的 Highcharts 包，提供了丰富的组件、混合类和 helper，用于在 Ember 应用中创建复杂的 Highcharts 图表。通过本文的介绍，相信读者已经了解了该包的基本 API 和使用方式。
值得注意的是，在实际使用中，尽量避免过度渲染和数据量过大。此外，还需要深入了解 Highcharts 的各种配置和扩展功能，以更好地应对实际需求。
希望本文能够对想要深入学习 Highcharts 和 ember-highcharts-extra 的读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca53