用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内容的最佳状态！
对于图表，我们将使用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元素时创建并显示组件的实例。
>>模板：渲染组件时要使用的模板。目前，我们正在传递一个包含占位符
类方法是我们在其中添加模板的行为和事件绑定。
- >您应该能够在此时在浏览器中运行代码，并查看消息“图表将在此处呈现”。
创建图表
>让我们继续创建图表并显示2014年的一些数据。 为此
类型：我们希望创建
的图表类型- renderat：将我们的图表渲染到
- >的DOM选择器 宽度和高度：图表尺寸
- ID：生成图表的ID
- > dataformat：传递到数据源选项的数据格式
- > dataSource：实际图表的配置以及它应该显示的数据
- 这是完整的配置文件。
- >不确定任何图表选项实际上要做什么，或者您想找出如何配置图表的外观，则可以参考FusionCharts文档中的“图表属性”页面。
> >我们要做的另一件事是更新模板以包括我们的图表应呈现的容器。您可以通过将字符串指定到组件的模板属性（如我们之前所做的），或者通过将模板移动到自己的文件中并使用TemplateUrl。<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>登录后复制登录后复制登录后复制登录后复制
无论哪种方式，这都是我们的模板的样子。>
这是我们到目前为止所拥有的演示：
>加载plunk…<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>登录后复制登录后复制登录后复制登录后复制
>您可以在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年的新数据更新图表。
>添加注释
>为了将公司徽标添加到X轴上，我们将使用FusionCharts强大的功能之一 -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>登录后复制登录后复制注释
。 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轴上看到公司徽标。要了解有关使用注释以及其他可能的更多信息，请参阅文档页面（如上所述）。 >
- >在数据集之间切换
构建数据。
因此，我们需要考虑如何以一种可以在不同年份定义不同数据集的方式构建数据。如前所述，FusionCharts期望配置选项包含数据属性，该选项应该是包含一组标签/值对的数组。
>处理多个数据集的一种方法是定义构造函数顶部的数据集对象，并使用别名将其连接到构造函数。>
然后，在配置选项中，我们将其传递给FusionCharts构造函数，我们可以做：>
>更新切换上的图表数据
>我们还希望将图表与2015年的数据一起更新，一旦有人单击2015 >按钮，然后切换回显示2014年的数据，当<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
按钮单击时。<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和上述点击处理程序后，单击这些按钮应加载该年的数据。demo<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>登录后复制登录后复制登录后复制登录后复制
这是最后的演示。><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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何实现视差滚动和元素动画效果，像资生堂官网那样？
或者：
怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？
Apr 04, 2025 pm 05:36 PM
实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...
JavaScript的演变：当前的趋势和未来前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。
如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...
JavaScript引擎：比较实施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
前端开发中如何实现类似 VSCode 的面板拖拽调整功能？
Apr 04, 2025 pm 02:06 PM
探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中，如何实现类似于VSCode...
