用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 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
從C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
JavaScript在行動中：現實世界中的示例和項目
Apr 19, 2025 am 12:13 AM
JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
了解JavaScript引擎：實施詳細信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：社區，圖書館和資源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。
Python vs. JavaScript：開發環境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
