如果你正在寻找一种能够帮助你快速构建漂亮、交互性强的图表的方法，那么 ember-highcharts-mixin 可能是你所需要的。
本文将详细介绍如何使用 ember-highcharts-mixin，以及如何配置和加载 Highcharts。
Highcharts 的安装
在使用 ember-highcharts-mixin 之前，先确保已经安装了 Highcharts。在控制台中输入以下命令以安装 Highcharts：
npm install highcharts
注：需要确保项目中已经存在 https://code.highcharts.com/highcharts.js 这个库，需要在 app/index.html 文件中添加以下代码，将其加载到头部：
<head> ... <script src="https://code.highcharts.com/highcharts.js"></script> ... </head>
完成上述步骤后，即可开始使用 ember-highcharts-mixin。
安装 ember-highcharts-mixin
通过执行以下命令，即可安装 ember-highcharts-mixin：
npm install --save-dev ember-highcharts-mixin
安装完成后，在自己的项目中，在使用图表的组件中运用该 mixin。
使用例子
接下来，我们通过一个简单的例子演示如何使用 ember-highcharts-mixin 。
在示例代码中，我们将为一个简单的数据列表添加一个图表，该图表将显示每个数据的数量。我们将在一个组件中使用 ember-highcharts-mixin 来实现这个图表。
首先，在模板文件中定义一个 chart-component 组件。
{{!-- app/components/chart-component.hbs --}}
<div id="chart"></div>然后，在控制器中添加代码来产生一些数据，并将这些数据传递给图表组件。
-- -------------------- ---- -------
-- ------------------------------
------ ----- ---- --------
------ ------- -------------------------
----- ---------
------ ------- ------ ----
------ ------- ------ ----
------ ------ ------ ----
------ ------ ------ ----
------ ------- ------ ----
------ ------- ------ ---
--
---接下来，在 chart-component 组件代码中，我们需要引入 Highcharts 库和 ember-highcharts-mixin。
-- -------------------- ---- -------
-- ---------------------------------
------ ----- ---- --------
------ ---------- ---- -------------
------ -------------------- ---- -------------------------
------ ------- -------------------------------------------- -
----------- --------
------------- -
------ -
----- -----
--
------ -
----- ----- ------
--
------ -
------ -
----- -------
--
----------- ---------------------------- -------
--
------ -
------ -
----- --------
-
--
------- --
----- --------
----- ---------------------------- --------
--
--
---------- -----------------------------
------------------ -
-------------------
-
---在 ember-highcharts-mixin 中，我们使用了 Ember.computed，而不是将数据硬编码到组件代码中。这样，我们就可以动态地更新图表，而不必担心每次数据发生变化时都要手动修改图表代码。
最后，在模板文件中渲染 chart-component。
// app/templates/application.hbs
{{chart-component data=data}}现在，我们就可以看到一个可交互的、漂亮的图表了。
总结
ember-highcharts-mixin 是处理 Highcharts 图表的好方法之一，它使得使用 Highcharts 更加容易和直观。
在本文中，我们学习了如何安装 Highcharts 和 ember-highcharts-mixin，以及如何在组件中使用 ember-highcharts-mixin 以显示数据图表。借助这些资料，你可以轻松地将数据可视化，以便更好地分析和理解数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca54