搜索
首页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中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

构建您自己的Ajax Web应用程序构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

10个JQuery Fun and Games插件10个JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味横生的jQuery游戏插件，让您的网站更具吸引力，提升用户粘性！虽然Flash仍然是开发休闲网页游戏的最佳软件，但jQuery也能创造出令人惊喜的效果，虽然无法与纯动作Flash游戏媲美，但在某些情况下，您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏 游戏编程的“Hello world”，现在有了jQuery版本。 源码 jQuery疯狂填词游戏 这是一个填空游戏，由于不知道单词的上下文，可能会产生一些古怪的结果。 源码 jQuery扫雷游戏

如何创建和发布自己的JavaScript库？如何创建和发布自己的JavaScript库？Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

jQuery视差教程 - 动画标题背景jQuery视差教程 - 动画标题背景Mar 08, 2025 am 12:39 AM

本教程演示了如何使用jQuery创建迷人的视差背景效果。 我们将构建一个带有分层图像的标题横幅，从而创造出令人惊叹的视觉深度。 更新的插件可与JQuery 1.6.4及更高版本一起使用。 下载

如何在浏览器中优化JavaScript代码以进行性能？如何在浏览器中优化JavaScript代码以进行性能？Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

Matter.js入门：简介Matter.js入门：简介Mar 08, 2025 am 12:53 AM

Matter.js是一个用JavaScript编写的2D刚体物理引擎。此库可以帮助您轻松地在浏览器中模拟2D物理。它提供了许多功能，例如创建刚体并为其分配质量、面积或密度等物理属性的能力。您还可以模拟不同类型的碰撞和力，例如重力摩擦力。 Matter.js支持所有主流浏览器。此外，它也适用于移动设备，因为它可以检测触摸并具有响应能力。所有这些功能都使其值得您投入时间学习如何使用该引擎，因为这样您就可以轻松创建基于物理的2D游戏或模拟。在本教程中，我将介绍此库的基础知识，包括其安装和用法，并提供一

使用jQuery和Ajax自动刷新DIV内容使用jQuery和Ajax自动刷新DIV内容Mar 08, 2025 am 12:58 AM

本文演示了如何使用jQuery和ajax自动每5秒自动刷新DIV的内容。 该示例从RSS提要中获取并显示了最新的博客文章以及最后的刷新时间戳。 加载图像是选择

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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
在哪里可以找到原子中的起重机控制钥匙卡
1 周前ByDDD
显示更多

热工具

SublimeText3 英文版

SublimeText3 英文版

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

mPDF

mPDF

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

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

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

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

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

螳螂BT

螳螂BT

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

显示更多

热门话题

gmail邮箱登陆入口在哪里
7416
15
CakePHP 教程
1359
52
steam的账户名称是什么格式
76
11
win11激活密钥永久
26
19
显示更多