社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 用Angular 2和FusionCharts構建圖表組件

用Angular 2和FusionCharts構建圖表組件

Joseph Gordon-Levitt
發布： 2025-02-17 12:51:10
原創
1056 人瀏覽過

用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
2777
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2909
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
2431
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
2340
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
2417
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板