搜索
首页web前端js教程用Angular 2和FusionCharts构建图表组件

用Angular 2和FusionCharts构建图表组件

Joseph Gordon-Levitt
Joseph Gordon-Levitt
Feb 17, 2025 pm 12:51 PM

用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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></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>
</span><span><span><span> lang<span>="en"</span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Angular 2 FusionCharts Demo<span><span></span>></span>
</span>
    <span><!-- 1. Load custom CSS & fonts-->
</span>    <span><span><span><link> rel<span>="stylesheet"</span> href<span>="styles.css"</span>></span>
</span>    <span><span><span><link> 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> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script> src<span >="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 3. Load FusionCharts library-->
</span>    <span><span><span><script> src<span >="https://static.fusioncharts.com/code/latest/fusioncharts.js"</script></span>></span><span><span></span>></span>
</span>
    <span><!-- 4. Load component -->
</span>    <span><span><span><script> src<span >='main.js'</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>
    <span><!-- 5. Display the application -->
</span>    <span><span><span><angular-chart>></angular-chart></span>Loading...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span></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中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
JavaScript的核心：它是在C还是C上构建的？JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

node.js流带打字稿node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O，这在很大程度上要归功于流。 流媒体汇总处理数据，避免内存过载 - 大型文件，网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript：性能和效率注意事项Python vs. JavaScript：性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在：1)Python作为解释型语言，运行速度较慢，但开发效率高，适合快速原型开发；2)JavaScript在浏览器中受限于单线程，但在Node.js中可利用多线程和异步I/O提升性能，两者在实际项目中各有优势。

JavaScript的起源：探索其实施语言JavaScript的起源：探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年，由布兰登·艾克创造，实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055523无法在Windows 11中安装？
3 周前ByDDD
如何修复KB5055518无法在Windows 10中安装？
3 周前ByDDD
<🎜>：死铁路 - 如何驯服狼
4 周前ByDDD
R.E.P.O.的每个敌人和怪物的力量水平
4 周前By尊渡假赌尊渡假赌尊渡假赌
<🎜>：种植花园 - 完整的突变指南
2 周前ByDDD
显示更多

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）专业的PHP集成开发工具

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

显示更多

热门话题

Java教程
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1229
24
显示更多