社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > web前端 > js教程 > 用Angular 2和FusionCharts构建图表组件

用Angular 2和FusionCharts构建图表组件

Joseph Gordon-Levitt
发布： 2025-02-17 12:51:10
原创
1060 人浏览过

用Angular 2和FusionCharts构建图表组件

钥匙要点

  • >利用Angular 2用于建筑图表组件，利用其在Angular 1.X上的改进，包括增强的语言支持和DOM管理。
    • >通过直接与JavaScript进行编码，将FusionCharts与Angular 2与Angular 2集成，以创建视觉吸引人的图表。
  • >开发一个动态图表组件，能够在数据集之间切换（例如，2014年和2015年的主要科技公司的收入统计数据），增强交互性和用户参与度。
    • >
  • >使用FusionCharts的注释功能来自定义图表，例如将公司徽标添加到图表轴上，该徽标提供了量身定制的视觉体验。
  • >探索与Angular 2和FusionCharts的进一步功能和集成可能性，鼓励读者在基本图表组件上扩展具有更复杂的配置和图表类型的基本图表组件。
  • >
    • 本文是由Vildan Softic审查的。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳状态！
>作为Web开发人员，如果您不能错过的东西，那就是Angular 2。它是Google受欢迎的JavaScript框架的完整重写，并且出于所有正确的原因，它一直在新闻中。它比以前的版本提供了一些重大改进，这就是为什么我们今天选择它来构建一些漂亮的图表。

对于图表，我们将使用FusionCharts提供的JavaScript图表库。它提供了良好的图表集合，并且与所有主要浏览器兼容。尽管FusionCharts为Angular提供了专用插件，但它尚未与Angular 2兼容。因此，我不会使用它，而是使用JavaScript和Angular 2直接使用它代码。您在应用程序中使用了Angular 1。 我们要绘图的图表将描述一个有趣的统计数据 - 五家顶级科技公司（亚马逊，苹果，Facebook，Google，Google和Microsoft）的收入，并将可以选择在2014年和2015年的收入数据之间切换。将首先通过Angular 2中创建图表的分步过程。构建基本图表后，我们将介绍一些高级主题，例如添加注释和更新图表数据。 >一如既往，您可以从我们的GitHub repo下载本教程的代码，也可以在文章末尾跳到完成图表的演示。

>

角2 vs Angular 1.x

> Angular 2比以前的主要版本（Angular 1.x）有一些重大变化，例如其对Typescript和Dart等语言的支持，以及它计算到DOM的更新方式。如果您想了解有关Angular 1概念和技术如何映射到Angular 2的更多信息，则可以查看官方快速参考。如果您有兴趣将应用程序从Angular 1.X迁移到Angular 2，则可以阅读官方迁移指南。

> Angular 2支持打字稿和DART，但由于其熟悉程度，我们将使用本机JavaScript在本教程中编写Angular 2应用程序。使用Typescript或Dart也将引入不必要的构建步骤。

>

>设置

有很多方法可以使用Angular 2项目启动和运行。最简单的可能是前往官方网站并遵循其5分钟的Quickstart教程。

>对这种方法的一个小警告是，它依赖于您在计算机上安装了节点和NPM。我们确实为此提供了指南，但是如果您希望在不安装这些教程的情况下遵循本教程，则可以使用以下模板：>

创建图表组件

组件是任何Angular 2应用程序的构件。它们是可重复使用的代码，包括视图和一些逻辑。如果您熟悉Angular 1，则可以将它们视为带有模板和控制器的指令。 
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
    <span><!-- 2. Load Angular 2 specific libraries -->
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制
以下是我们图表组件的基础：

>让我们一秒钟看看发生了什么。

>

>我们从使用IIFE（立即调用函数表达式）开始，我们用来命名应用程序空间。我们将其传递窗口。Chartapp作为一个参数，如果未定义，则将其初始化为空对象。这是我们的应用程序将要居住的地方 - 在全局对象上的单个属性中。 在IIFE内部，我们通过将组件和类方法从NG.Core（Angular的核心组件集合）链接来创建我们的组件（AppComponent）。我们正在传递组件方法一个配置对象，该对象包含以下propeties：> 

<span>(function(chartApp){
</span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>    <span>selector: 'angular-chart',
</span>    <span>template: '<div>Chart will render here</div>'
</span>  <span>}).<span>Class</span>({
</span>    <span>constructor: function(){}
</span>  <span>});
</span>
  <span>document.addEventListener('DOMContentLoaded', function() {
</span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span>  <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>
登录后复制
登录后复制
登录后复制
登录后复制

选择器：一个简单的CSS选择器，该选择器指定主机HTML元素。 Angular将在遇到与此选择器匹配的HTML元素时创建并显示组件的实例。

>

>模板：渲染组件时要使用的模板。目前，我们正在传递一个包含占位符

元素的字符串，但理想情况下，我们应该将其移至其自己的模板中。

类方法是我们在其中添加模板的行为和事件绑定。>

定义了我们的基本组件，我们使用Angular的浏览器bootstrap函数初始化它。
  • >您应该能够在此时在浏览器中运行代码，并查看消息“图表将在此处呈现”。

    创建图表

    >让我们继续创建图表并显示2014年的一些数据。 为此

    类型：我们希望创建

    的图表类型
      renderat：将我们的图表渲染到
    • >的DOM选择器
      • 宽度和高度：图表尺寸
      • ID：生成图表的ID
    • >
      • dataformat：传递到数据源选项的数据格式>
    • > dataSource：实际图表的配置以及它应该显示的数据
      • 这是完整的配置文件。
      • >不确定任何图表选项实际上要做什么，或者您想找出如何配置图表的外观，则可以参考FusionCharts文档中的“图表属性”页面。 
    <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
    <span><!-- 2. Load Angular 2 specific libraries -->
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >我们要做的另一件事是更新模板以包括我们的图表应呈现的容器。您可以通过将字符串指定到组件的模板属性（如我们之前所做的），或者通过将模板移动到自己的文件中并使用TemplateUrl。

    无论哪种方式，这都是我们的模板的样子。

    >

    这是我们到目前为止所拥有的演示：

    > 
    <span>(function(chartApp){
</span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>    <span>selector: 'angular-chart',
</span>    <span>template: '<div>Chart will render here</div>'
</span>  <span>}).<span>Class</span>({
</span>    <span>constructor: function(){}
</span>  <span>});
</span>
  <span>document.addEventListener('DOMContentLoaded', function() {
</span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span>  <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    加载plunk…

    >您可以在Plunker上查看此演示的代码。
    <span>new FusionCharts({
</span>  <span>"type": "column2d",
</span>  <span>"renderAt": "chart-container",
</span>  <span>"width": "550",
</span>  <span>"height": "400",
</span>  <span>"id": "revenue-chart",
</span>  <span>"dataFormat": "json",
</span>  <span>"dataSource": {
</span>    <span>"chart": {
</span>      <span>"yAxisName": "Revenue (In USD Billion)",
</span>      <span>"yAxisMaxValue": "200",
</span>      <span>...
</span>    <span>},
</span>    <span>"data": [{
</span>      <span>"label": "Amazon",
</span>      <span>"value": "88.99"
</span>    <span>}, {
</span>      <span>"label": "Apple",
</span>      <span>"value": "182.8"
</span>    <span>}
</span>    <span>...
</span>    <span>]
</span>  <span>}
</span><span>});
</span>
    登录后复制
    登录后复制
    登录后复制

    如果您单击plunker上的演示，则在文件main.js中，您可能会注意到我们已经将FusionCharts配置数据分开为自己的文件，然后我们使用Angular的HTTP类来获取。这是为了清楚起见（它使角度特定的代码易于遵循），也是因为在现实生活中，请求数据请求是您通常会在现实生活中所做的。

    > 但是，这不是绝对必要的，您会通过直接在ChartApp构造函数中执行所有操作来获得相同的结果：

    >唯一要提及的是，初始化代码包裹在FusionCharts.ready方法中。在加载FusionCharts库之前，此图表实例化代码不受调用。

    >

    >准备好基本图表，现在是时候添加更多功能了，例如使用公司徽标而不是名称并使用2015年的新数据更新图表。

    >

    添加注释

    chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>  <span>selector: 'angular-chart',
</span>  <span>templateUrl: 'chart.html'
</span><span>}).<span>Class</span>({
</span>  <span>...
</span><span>});
</span>
    登录后复制
    登录后复制
    >为了将公司徽标添加到X轴上，我们将使用FusionCharts强大的功能之一 -

    注释

    。 FusionCharts对象上的注释允许您在图表上指定的位置绘制自定义形状或图像。

    >假设您想在图表中心添加公司徽标。您可以使用注释和宏来进行。宏将为您提供图表中心的坐标，注释将使您在该位置添加图像。 当您使用动态注释以例如获取取决于图表数据的位置的信息时，事情会变得有趣。想象一下，您想精确地绘制列结束的位置。您可以使用动态注释宏$ dataset.0.set.1.Endx和$ dataset.0.set.1.endy确定列端点的x和y坐标，然后在那里绘制一些东西。您可以在此FusionCharts文档页面上了解有关注释以及如何使用它们的更多信息。

    >

    对于我们的图表，我们将使用动态注释宏来获取每一列的启动和结束坐标，然后我们将绘制各自的公司徽标。我们还将使用图表属性“ ShowLabels”：“ 0”。 为了实现上述目标，请将以下代码添加到图表的配置：>

    在上面的代码中：

    >类型正在设置注释的类型。
    <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
    <span><!-- 2. Load Angular 2 specific libraries -->
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    URL正在设置图像的地址。

    >
      x和y正在设置图像的启动x和y坐标。
    • >
    • 添加上述代码后，您应该在X轴上看到公司徽标。要了解有关使用注释以及其他可能的更多信息，请参阅文档页面（如上所述）。
      • >
    • >在数据集之间切换
    我们要实施的最后一件事是允许用户在几年之间切换，根据所选年份（2014或2015年）查看其他数据集。

    构建数据。

    因此，我们需要考虑如何以一种可以在不同年份定义不同数据集的方式构建数据。如前所述，FusionCharts期望配置选项包含数据属性，该选项应该是包含一组标签/值对的数组。

    >处理多个数据集的一种方法是定义构造函数顶部的数据集对象，并使用别名将其连接到构造函数。

    >

    然后，在配置选项中，我们将其传递给FusionCharts构造函数，我们可以做：>

    >更新切换上的图表数据

    >我们还希望将图表与2015年的数据一起更新，一旦有人单击 2015
    <span>(function(chartApp){
</span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>    <span>selector: 'angular-chart',
</span>    <span>template: '<div>Chart will render here</div>'
</span>  <span>}).<span>Class</span>({
</span>    <span>constructor: function(){}
</span>  <span>});
</span>
  <span>document.addEventListener('DOMContentLoaded', function() {
</span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span>  <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >按钮，然后切换回显示2014年的数据，当

    > 2014

    按钮单击时。
    <span>new FusionCharts({
</span>  <span>"type": "column2d",
</span>  <span>"renderAt": "chart-container",
</span>  <span>"width": "550",
</span>  <span>"height": "400",
</span>  <span>"id": "revenue-chart",
</span>  <span>"dataFormat": "json",
</span>  <span>"dataSource": {
</span>    <span>"chart": {
</span>      <span>"yAxisName": "Revenue (In USD Billion)",
</span>      <span>"yAxisMaxValue": "200",
</span>      <span>...
</span>    <span>},
</span>    <span>"data": [{
</span>      <span>"label": "Amazon",
</span>      <span>"value": "88.99"
</span>    <span>}, {
</span>      <span>"label": "Apple",
</span>      <span>"value": "182.8"
</span>    <span>}
</span>    <span>...
</span>    <span>]
</span>  <span>}
</span><span>});
</span>
    登录后复制
    登录后复制
    登录后复制

    >让我们添加两个按钮，该按钮将用于执行此操作并给他们一些样式。修改组件模板如下：

    > 
    chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>  <span>selector: 'angular-chart',
</span>  <span>templateUrl: 'chart.html'
</span><span>}).<span>Class</span>({
</span>  <span>...
</span><span>});
</span>
    登录后复制
    登录后复制

    请注意添加事件侦听器并在Angular 2中添加NGCLASS指令的新语法。它们几乎与Angular 1相同，没有一些括号和括号。

    >我已经添加了NGCLASS指令，以通过将选定的CSS类应用于按钮元素来突出显示当前所选年。这是基于组件上的SelectedYear属性，该属性在单击按钮上更新。

    >我们可以将当前选定的年度设置为2014年，当组件通过将以下行添加到构造函数的顶部呈现：

    > 

    <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title</span>></span>Angular 2 FusionCharts Demo<span><span></title</span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link</span> href<span>='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300'</span> rel<span>='stylesheet'</span>></span>
</span>
    <span><!-- 2. Load Angular 2 specific libraries -->
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script</span> src<span>="https://static.fusioncharts.com/code/latest/fusioncharts.js"</span>></span><span><span></script</span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script</span> src<span>='main.js'</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart</span>></span>Loading...<span><span></angular-chart</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    处理按钮点击的逻辑将添加到新的年龄函数中。

    为此，我们将使用FusionChart的SetChartData方法，该方法既需要图表配置选项和实际图表数据。我们将使用getChartData方法从已经渲染的图表中获取图表属性，而不是先存储图表属性，然后引用它们，并使用getChartData方法并使用特定年份的数据来修改该数据。

    在为按钮添加HTML和上述点击处理程序后，单击这些按钮应加载该年的数据。 
    <span>(function(chartApp){
</span>  chartApp<span>.<span>AppComponent</span> = ng.core.<span>Component</span>({
</span>    <span>selector: 'angular-chart',
</span>    <span>template: '<div>Chart will render here</div>'
</span>  <span>}).<span>Class</span>({
</span>    <span>constructor: function(){}
</span>  <span>});
</span>
  <span>document.addEventListener('DOMContentLoaded', function() {
</span>    ng<span>.platform.browser.bootstrap(chartApp.<span>AppComponent</span>);
</span>  <span>});
</span><span>})(window.chartApp || (window.chartApp = {}));
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    demo

    这是最后的演示。
    <span>new FusionCharts({
</span>  <span>"type": "column2d",
</span>  <span>"renderAt": "chart-container",
</span>  <span>"width": "550",
</span>  <span>"height": "400",
</span>  <span>"id": "revenue-chart",
</span>  <span>"dataFormat": "json",
</span>  <span>"dataSource": {
</span>    <span>"chart": {
</span>      <span>"yAxisName": "Revenue (In USD Billion)",
</span>      <span>"yAxisMaxValue": "200",
</span>      <span>...
</span>    <span>},
</span>    <span>"data": [{
</span>      <span>"label": "Amazon",
</span>      <span>"value": "88.99"
</span>    <span>}, {
</span>      <span>"label": "Apple",
</span>      <span>"value": "182.8"
</span>    <span>}
</span>    <span>...
</span>    <span>]
</span>  <span>}
</span><span>});
</span>
    登录后复制
    登录后复制
    登录后复制
    >

    加载plunk…

    >您可以在Plunker上查看此演示的代码。或者，您可以从我们的GitHub存储库中下载代码。

    >

    >如果您单击“ plunker”，您会发现我们已直接在config.json文件中定义了数据集属性。这使我们的组件变得更加整洁。

    >我们首先构建一个简单的角图，然后继续使用注释和其他FusionCharts的API为其添加更多功能。但这只是冰山一角，使用Angular 2和FusionCharts可以完成更多。您可以自己探索的某些事情：

    >

    包括更多图表：列图并不总是表示数据集的最佳方法。根据您的用例，您可能需要使用不同的图表，例如瀑布，雷达，规格等。因此，请尝试使用本教程中解释的过程来绘制其他图表，看看您是否能够成功完成。 >

    >

    在您的应用程序中包括图表：如果您要制作混合移动应用程序，那么您必须意识到Ionic 2（最新版本的Ionic）基于Angular 2。这是一个好消息，因为您可以使用本教程也是为您的离子应用程序创建图表的基础。

      >

    • 探索更多事件：在本教程中，我解释了如何使用setChartdata方法，但是您可以使用更多的事件和方法来增强应用程序的用户体验。查看上面的链接页面，以了解有关FusionCharts提供的各种事件和方法的更多信息。

    >如果您在尝试自己制作图表时遇到任何困难，请参阅Angular或FusionCharts的文档（取决于问题），或者在下面发表评论。我会很乐意提供帮助！

    经常询问有关Angular2 FusionCharts中图表组件的问题

    >如何在Angular2？

    中安装FusionCharts以在Angular2中安装FusionCharts，您需要首先通过NPM安装FusionCharts和Angular FusionCharts。在终端中使用以下命令：>安装后，Import FusionCharts和Angular FusionCharts进入组件文件。然后，将fusionChartSmodule添加到您的ngmodule导入阵列中。

    我可以使用具有角cli的融合式，

    是的，FusionCharts与Angular Cli兼容。通过NPM安装FusionCharts和Angular FusionCharts之后，您可以将它们导入到Angular CLI项目中。请记住将FusionChartSmodule添加到您的ngmodule导入数组中。

    如何使用angular2？

    中的FusionCharts创建基本图表来创建基本图表来创建基本图表，您需要首先定义图表配置中的图表配置。成分。这包括图表类型，数据源和其他选项。然后，使用模板中的FusionCharts组件呈现图表。您可以通过修改图表配置来自定义图表。

    >我可以使用fusionCharts在Angular2？

    FusionCharts中使用哪些类型的图表来支持各种图表类型，包括线条，bar，bar，bar，pie ，区域，甜甜圈等。您还可以创建高级图表，例如组合图表，Zoomline图表和Treemaps。每种图表类型都有其自己的配置选项，您可以自定义以适合您的需求。

    >如何更新FusionCharts图表中的数据？

    以更新图表中的数据，需要修改图表配置中的数据源。当数据源更改时，FusionCharts将自动更新图表。您还可以使用setJsondata或setChartdata方法来编程更新数据。

    我可以将fusionCharts与typescript 2中的fusionCharts一起使用？您可以将FusionCharts和Angular FusionCharts导入打字稿文件中，并像常规的JavaScript文件中一样使用它们。

    >如何处理Angular2中的fusionCharts中的事件2？您可以收听的事件，例如DataPlotClick，ChartClick和Beforerender。要处理这些事件，您需要在组件中定义事件处理程序，并将其绑定到模板中的FusionCharts组件中。

    >我可以自定义FusionCharts Chart的外观吗？ FusionCharts提供了广泛的自定义选项。您可以自定义颜色，字体，边框，背景等。这些选项可以在图表配置中设置。

    >如何导出我的FusionCharts图表？您可以将图表导出为图像，PDF或SVG。要启用导出，您需要将导出选项设置为图表配置中的true。

    >如何通过FusionCharts图表进行调试问题？

    FusionCharts提供了调试模式，可登录有关详细信息的详细信息图表渲染过程。要启用调试模式，请在图表配置中将DebugMode选项设置为true。然后，您可以在浏览器的控制台中查看日志。

以上是用Angular 2和FusionCharts构建图表组件的详细内容。更多信息请关注PHP中文网其他相关文章！

上一篇：Internet Explorer之后的本地JavaScript开发 下一篇：JavaScript中猴子补丁的务实用途
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2781
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2916
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
2436
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
2342
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
2419
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板