搜尋
首頁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
顯示更多

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中

mPDF

mPDF

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7416
15
CakePHP 教程
1359
52
steam的賬戶名稱是什麼格式
76
11
win11激活密鑰永久
26
19
顯示更多