亚洲国产精品日韩av不卡在线 ,欧美性白人极品1819hd

請注意添加事件偵聽器並在Angular 2中添加NGCLASS指令的新語法。它們幾乎與Angular 1相同，沒有一些括號和括號。

>您可以在Plunker上查看此演示的代碼?；蛘撸梢詮奈覀兊腉itHub存儲庫中下載代碼。

經(jīng)常詢問有關(guān)Angular2 FusionCharts中圖表組件的問題

是的，F(xiàn)usionCharts與Angular Cli兼容。通過NPM安裝FusionCharts和Angular FusionCharts之後，您可以將它們導(dǎo)入到Angular CLI項(xiàng)目中。請記住將FusionChartSmodule添加到您的ngmodule導(dǎo)入數(shù)組中。

中的FusionCharts創(chuàng)建基本圖表來創(chuàng)建基本圖表來創(chuàng)建基本圖表，您需要首先定義圖表配置中的圖表配置。成分。這包括圖表類型，數(shù)據(jù)源和其他選項(xiàng)。然後，使用模板中的FusionCharts組件呈現(xiàn)圖表。您可以通過修改圖表配置來自定義圖表。

>如何導(dǎo)出我的FusionCharts圖表？您可以將圖表導(dǎo)出為圖像，PDF或SVG。要啟用導(dǎo)出，您需要將導(dǎo)出選項(xiàng)設(shè)置為圖表配置中的true。

首頁

web前端

js教程

用Angular 2和FusionCharts構(gòu)建圖表組件

Joseph Gordon-Levitt

Feb 17, 2025 pm 12:51 PM

用Angular 2和FusionCharts構(gòu)建圖表組件

鑰匙要點(diǎn)

>利用Angular 2用於建築圖表組件，利用其在Angular 1.X上的改進(jìn)，包括增強(qiáng)的語言支持和DOM管理。
>開發(fā)一個動態(tài)圖表組件，能夠在數(shù)據(jù)集之間切換（例如，2014年和2015年的主要科技公司的收入統(tǒng)計(jì)數(shù)據(jù)），增強(qiáng)交互性和用戶參與度。
>使用FusionCharts的註釋功能來自定義圖表，例如將公司徽標(biāo)添加到圖表軸上，該徽標(biāo)提供了量身定制的視覺體驗(yàn)。
>探索與Angular 2和FusionCharts的進(jìn)一步功能和集成可能性，鼓勵讀者在基本圖表組件上擴(kuò)展具有更複雜的配置和圖表類型的基本圖表組件。
>

>作為Web開發(fā)人員，如果您不能錯過的東西，那就是Angular 2。它是Google受歡迎的JavaScript框架的完整重寫，並且出於所有正確的原因，它一直在新聞中。它比以前的版本提供了一些重大改進(jìn)，這就是為什麼我們今天選擇它來構(gòu)建一些漂亮的圖表。

對於圖表，我們將使用FusionCharts提供的JavaScript圖表庫。它提供了良好的圖表集合，並且與所有主要瀏覽器兼容。儘管FusionCharts為Angular提供了專用插件，但它尚未與Angular 2兼容。因此，我不會使用它，而是使用JavaScript和Angular 2直接使用它代碼。您在應(yīng)用程序中使用了Angular 1。我們要繪圖的圖表將描述一個有趣的統(tǒng)計(jì)數(shù)據(jù)- 五家頂級科技公司（亞馬遜，蘋果，F(xiàn)acebook，Google，Google和Microsoft）的收入，並將可以選擇在2014年和2015年的收入數(shù)據(jù)之間切換。將首先通過Angular 2中創(chuàng)建圖表的分步過程。構(gòu)建基本圖表後，我們將介紹一些高級主題，例如添加註釋和更新圖表數(shù)據(jù)。 >一如既往，您可以從我們的GitHub repo下載本教程的代碼，也可以在文章末尾跳到完成圖表的演示。

角2 vs Angular 1.x

> Angular 2比以前的主要版本（Angular 1.x）有一些重大變化，例如其對Typescript和Dart等語言的支持，以及它計(jì)算到DOM的更新方式。如果您想了解有關(guān)Angular 1概念和技術(shù)如何映射到Angular 2的更多信息，則可以查看官方快速參考。如果您有興趣將應(yīng)用程序從Angular 1.X遷移到Angular 2，則可以閱讀官方遷移指南。

> Angular 2支持打字稿和DART，但由於其熟悉程度，我們將使用本機(jī)JavaScript在本教程中編寫Angular 2應(yīng)用程序。使用Typescript或Dart也將引入不必要的構(gòu)建步驟。

>設(shè)置

有很多方法可以使用Angular 2項(xiàng)目啟動和運(yùn)行。最簡單的可能是前往官方網(wǎng)站並遵循其5分鐘的Quickstart教程。

>對這種方法的一個小警告是，它依賴於您在計(jì)算機(jī)上安裝了節(jié)點(diǎn)和NPM。我們確實(shí)為此提供了指南，但是如果您希望在不安裝這些教程的情況下遵循本教程，則可以使用以下模板：>

創(chuàng)建圖表組件

組件是任何Angular 2應(yīng)用程序的構(gòu)件。它們是可重複使用的代碼，包括視圖和一些邏輯。如果您熟悉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>

以下是我們圖表組件的基礎(chǔ)：

>讓我們一秒鐘看看發(fā)生了什麼。

>我們從使用IIFE（立即調(diào)用函數(shù)表達(dá)式）開始，我們用來命名應(yīng)用程序空間。我們將其傳遞窗口。 Chartapp作為一個參數(shù)，如果未定義，則將其初始化為空對象。這是我們的應(yīng)用程序?qū)⒁幼〉牡胤?- 在全局對像上的單個屬性中。在IIFE內(nèi)部，我們通過將組件和類方法從NG.Core（Angular的核心組件集合）鏈接來創(chuàng)建我們的組件（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選擇器，該選擇器指定主機(jī)HTML元素。 Angular將在遇到與此選擇器匹配的HTML元素時創(chuàng)建並顯示組件的實(shí)例。

>模板：渲染組件時要使用的模板。目前，我們正在傳遞一個包含佔(zhàn)位符

元素的字符串，但理想情況下，我們應(yīng)該將其移至其自己的模板中。

類方法是我們在其中添加模板的行為和事件綁定。 >

定義了我們的基本組件，我們使用Angular的瀏覽器bootstrap函數(shù)初始化它。

>您應(yīng)該能夠在此時在瀏覽器中運(yùn)行代碼，並查看消息“圖表將在此處呈現(xiàn)”。

創(chuàng)建圖表

>讓我們繼續(xù)創(chuàng)建圖表並顯示2014年的一些數(shù)據(jù)。為此

類型：我們希望創(chuàng)建
的圖表類型
- >的DOM選擇器
- >
```
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Angular 2 FusionCharts Demo</title>

 
 <link rel="stylesheet" href="styles.css">
 <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>

 
 <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
 <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script>
 <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>

 
 <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>

 
 <script src='main.js'></script>
 </head>
 <body>

 
 <angular-chart>Loading...</angular-chart>
 </body>
</html>

```
>我們要做的另一件事是更新模板以包括我們的圖表應(yīng)呈現(xiàn)的容器。您可以通過將字符串指定到組件的模板屬性（如我們之前所做的），或者通過將模板移動到自己的文件中並使用TemplateUrl。

無論哪種方式，這都是我們的模板的樣子。
>

這是我們到目前為止所擁有的演示：
>
```
(function(chartApp){
 chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 template: '<div>Chart will render here</div>'
 }).Class({
 constructor: function(){}
 });

 document.addEventListener('DOMContentLoaded', function() {
 ng.platform.browser.bootstrap(chartApp.AppComponent);
 });
})(window.chartApp || (window.chartApp = {}));

```
加載plunk…

>您可以在Plunker上查看此演示的代碼。
```
new FusionCharts({
 "type": "column2d",
 "renderAt": "chart-container",
 "width": "550",
 "height": "400",
 "id": "revenue-chart",
 "dataFormat": "json",
 "dataSource": {
 "chart": {
 "yAxisName": "Revenue (In USD Billion)",
 "yAxisMaxValue": "200",
 ...
 },
 "data": [{
 "label": "Amazon",
 "value": "88.99"
 }, {
 "label": "Apple",
 "value": "182.8"
 }
 ...
 ]
 }
});

```
如果您單擊plunker上的演示，則在文件main.js中，您可能會注意到我們已經(jīng)將FusionCharts配置數(shù)據(jù)分開為自己的文件，然後我們使用Angular的HTTP類來獲取。這是為了清楚起見（它使角度特定的代碼易於遵循），也是因?yàn)樵诂F(xiàn)實(shí)生活中，請求數(shù)據(jù)請求是您通常會在現(xiàn)實(shí)生活中所做的。
> 但是，這不是絕對必要的，您會通過直接在ChartApp構(gòu)造函數(shù)中執(zhí)行所有操作來獲得相同的結(jié)果：
>唯一要提及的是，初始化代碼包裹在FusionCharts.ready方法中。在加載FusionCharts庫之前，此圖表實(shí)例化代碼不受調(diào)用。
>
>準(zhǔn)備好基本圖表，現(xiàn)在是時候添加更多功能了，例如使用公司徽標(biāo)而不是名稱並使用2015年的新數(shù)據(jù)更新圖表。
>
添加註釋
```
chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 templateUrl: 'chart.html'
}).Class({
 ...
});

```
>為了將公司徽標(biāo)添加到X軸上，我們將使用FusionCharts強(qiáng)大的功能之一 -
註釋
。 FusionCharts對像上的註釋允許您在圖表上指定的位置繪製自定義形狀或圖像。

>假設(shè)您想在圖表中心添加公司徽標(biāo)。您可以使用註釋和宏來進(jìn)行。宏將為您提供圖表中心的坐標(biāo)，註釋將使您在該位置添加圖像。當(dāng)您使用動態(tài)註釋以例如獲取取決於圖表數(shù)據(jù)的位置的信息時，事情會變得有趣。想像一下，您想精確地繪製列結(jié)束的位置。您可以使用動態(tài)註釋宏$ dataset.0.set.1.Endx和$ dataset.0.set.1.endy確定列端點(diǎn)的x和y坐標(biāo)，然後在那裡繪製一些東西。您可以在此FusionCharts文檔頁面上了解有關(guān)註釋以及如何使用它們的更多信息。
>
對於我們的圖表，我們將使用動態(tài)註釋宏來獲取每一列的啟動和結(jié)束坐標(biāo)，然後我們將繪製各自的公司徽標(biāo)。我們還將使用圖表屬性“ ShowLabels”：“ 0”。為了實(shí)現(xiàn)上述目標(biāo)，請將以下代碼添加到圖表的配置：>

在上面的代碼中：

>類型正在設(shè)置註釋的類型。
```
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Angular 2 FusionCharts Demo</title>

 
 <link rel="stylesheet" href="styles.css">
 <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>

 
 <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
 <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script>
 <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>

 
 <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>

 
 <script src='main.js'></script>
 </head>
 <body>

 
 <angular-chart>Loading...</angular-chart>
 </body>
</html>

```
URL正在設(shè)置圖像的地址。
>
- >
- 添加上述代碼後，您應(yīng)該在X軸上看到公司徽標(biāo)。要了解有關(guān)使用註釋以及其他可能的更多信息，請參閱文檔頁面（如上所述）。
- >在數(shù)據(jù)集之間切換
我們要實(shí)施的最後一件事是允許用戶在幾年之間切換，根據(jù)所選年份（2014或2015年）查看其他數(shù)據(jù)集。
構(gòu)建數(shù)據(jù)。
因此，我們需要考慮如何以一種可以在不同年份定義不同數(shù)據(jù)集的方式構(gòu)建數(shù)據(jù)。如前所述，F(xiàn)usionCharts期望配置選項(xiàng)包含數(shù)據(jù)屬性，該選項(xiàng)應(yīng)該是包含一組標(biāo)籤/值對的數(shù)組。

>處理多個數(shù)據(jù)集的一種方法是定義構(gòu)造函數(shù)頂部的數(shù)據(jù)集對象，並使用別名將其連接到構(gòu)造函數(shù)。
>
然後，在配置選項(xiàng)中，我們將其傳遞給FusionCharts構(gòu)造函數(shù)，我們可以做：
>

>更新切換上的圖表數(shù)據(jù)

>我們還希望將圖表與2015年的數(shù)據(jù)一起更新，一旦有人單擊
2015
```
(function(chartApp){
 chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 template: '<div>Chart will render here</div>'
 }).Class({
 constructor: function(){}
 });

 document.addEventListener('DOMContentLoaded', function() {
 ng.platform.browser.bootstrap(chartApp.AppComponent);
 });
})(window.chartApp || (window.chartApp = {}));

```
>按鈕，然後切換回顯示2014年的數(shù)據(jù)，當(dāng)
> 2014
按鈕單擊時。
```
new FusionCharts({
 "type": "column2d",
 "renderAt": "chart-container",
 "width": "550",
 "height": "400",
 "id": "revenue-chart",
 "dataFormat": "json",
 "dataSource": {
 "chart": {
 "yAxisName": "Revenue (In USD Billion)",
 "yAxisMaxValue": "200",
 ...
 },
 "data": [{
 "label": "Amazon",
 "value": "88.99"
 }, {
 "label": "Apple",
 "value": "182.8"
 }
 ...
 ]
 }
});

```
>讓我們添加兩個按鈕，該按鈕將用於執(zhí)行此操作並給他們一些樣式。修改組件模板如下：
>
```
chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 templateUrl: 'chart.html'
}).Class({
 ...
});

```
請注意添加事件偵聽器並在Angular 2中添加NGCLASS指令的新語法。它們幾乎與Angular 1相同，沒有一些括號和括號。

>我已經(jīng)添加了NGCLASS指令，以通過將選定的CSS類應(yīng)用於按鈕元素來突出顯示當(dāng)前所選年。這是基於組件上的SelectedYear屬性，該屬性在單擊按鈕上更新。
>我們可以將當(dāng)前選定的年度設(shè)置為2014年，當(dāng)組件通過將以下行添加到構(gòu)造函數(shù)的頂部呈現(xiàn)：
>
```
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Angular 2 FusionCharts Demo</title>

 
 <link rel="stylesheet" href="styles.css">
 <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet'>

 
 <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
 <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script>
 <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>

 
 <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>

 
 <script src='main.js'></script>
 </head>
 <body>

 
 <angular-chart>Loading...</angular-chart>
 </body>
</html>

```
處理按鈕點(diǎn)擊的邏輯將添加到新的年齡函數(shù)中。
為此，我們將使用FusionChart的SetChartData方法，該方法既需要圖表配置選項(xiàng)和實(shí)際圖表數(shù)據(jù)。我們將使用getChartData方法從已經(jīng)渲染的圖表中獲取圖表屬性，而不是先存儲圖表屬性，然後引用它們，並使用getChartData方法並使用特定年份的數(shù)據(jù)來修改該數(shù)據(jù)。
在為按鈕添加HTML和上述點(diǎn)擊處理程序後，單擊這些按鈕應(yīng)加載該年的數(shù)據(jù)。
```
(function(chartApp){
 chartApp.AppComponent = ng.core.Component({
 selector: 'angular-chart',
 template: '<div>Chart will render here</div>'
 }).Class({
 constructor: function(){}
 });

 document.addEventListener('DOMContentLoaded', function() {
 ng.platform.browser.bootstrap(chartApp.AppComponent);
 });
})(window.chartApp || (window.chartApp = {}));

```
demo

這是最後的演示。
```
new FusionCharts({
 "type": "column2d",
 "renderAt": "chart-container",
 "width": "550",
 "height": "400",
 "id": "revenue-chart",
 "dataFormat": "json",
 "dataSource": {
 "chart": {
 "yAxisName": "Revenue (In USD Billion)",
 "yAxisMaxValue": "200",
 ...
 },
 "data": [{
 "label": "Amazon",
 "value": "88.99"
 }, {
 "label": "Apple",
 "value": "182.8"
 }
 ...
 ]
 }
});

```
>
加載plunk…

>您可以在Plunker上查看此演示的代碼?；蛘?，您可以從我們的GitHub存儲庫中下載代碼。
>
>如果您單擊“ plunker”，您會發(fā)現(xiàn)我們已直接在config.json文件中定義了數(shù)據(jù)集屬性。這使我們的組件變得更加整潔。
結(jié)論和下一步
>我們首先構(gòu)建一個簡單的角圖，然後繼續(xù)使用註釋和其他FusionCharts的API為其添加更多功能。但這只是冰山一角，使用Angular 2和FusionCharts可以完成更多。您可以自己探索的某些事情：

>
包括更多圖表：列圖並不總是表示數(shù)據(jù)集的最佳方法。根據(jù)您的用例，您可能需要使用不同的圖表，例如瀑布，雷達(dá)，規(guī)格等。因此，請嘗試使用本教程中解釋的過程來繪製其他圖表，看看您是否能夠成功完成。 >
>
在您的應(yīng)用程序中包括圖表：如果您要製作混合移動應(yīng)用程序，那麼您必須意識到Ionic 2（最新版本的Ionic）基於Angular 2。這是一個好消息，因?yàn)槟梢允褂帽窘坛桃彩菫槟碾x子應(yīng)用程序創(chuàng)建圖表的基礎(chǔ)。
- 探索更多事件：在本教程中，我解釋瞭如何使用setChartdata方法，但是您可以使用更多的事件和方法來增強(qiáng)應(yīng)用程序的用戶體驗(yàn)。查看上面的鏈接頁面，以了解有關(guān)FusionCharts提供的各種事件和方法的更多信息。
>如果您在嘗試自己製作圖表時遇到任何困難，請參閱Angular或FusionCharts的文檔（取決於問題），或者在下面發(fā)表評論。我會很樂意提供幫助！

經(jīng)常詢問有關(guān)Angular2 FusionCharts中圖表組件的問題

>如何在Angular2？

中安裝FusionCharts以在Angular2中安裝FusionCharts，您需要首先通過NPM安裝FusionCharts和Angular FusionCharts。在終端中使用以下命令：>安裝後，Import FusionCharts和Angular FusionCharts進(jìn)入組件文件。然後，將fusionChartSmodule添加到您的ngmodule導(dǎo)入陣列中。

我可以使用具有角cli的融合式，

是的，F(xiàn)usionCharts與Angular Cli兼容。通過NPM安裝FusionCharts和Angular FusionCharts之後，您可以將它們導(dǎo)入到Angular CLI項(xiàng)目中。請記住將FusionChartSmodule添加到您的ngmodule導(dǎo)入數(shù)組中。

如何使用angular2？

中的FusionCharts創(chuàng)建基本圖表來創(chuàng)建基本圖表來創(chuàng)建基本圖表，您需要首先定義圖表配置中的圖表配置。成分。這包括圖表類型，數(shù)據(jù)源和其他選項(xiàng)。然後，使用模板中的FusionCharts組件呈現(xiàn)圖表。您可以通過修改圖表配置來自定義圖表。

>我可以使用fusionCharts在Angular2？

FusionCharts中使用哪些類型的圖表來支持各種圖表類型，包括線條，bar，bar，bar，pie ，區(qū)域，甜甜圈等。您還可以創(chuàng)建高級圖表，例如組合圖表，Zoomline圖表和Treemaps。每種圖表類型都有其自己的配置選項(xiàng)，您可以自定義以適合您的需求。

>如何更新FusionCharts圖表中的數(shù)據(jù)？

以更新圖表中的數(shù)據(jù)，需要修改圖表配置中的數(shù)據(jù)源。當(dāng)數(shù)據(jù)源更改時，F(xiàn)usionCharts將自動更新圖表。您還可以使用setJsondata或setChartdata方法來編程更新數(shù)據(jù)。
我可以將fusionCharts與typescript 2中的fusionCharts一起使用？您可以將FusionCharts和Angular FusionCharts導(dǎo)入打字稿文件中，並像常規(guī)的JavaScript文件中一樣使用它們。
>如何處理Angular2中的fusionCharts中的事件2？您可以收聽的事件，例如DataPlotClick，ChartClick和Beforerender。要處理這些事件，您需要在組件中定義事件處理程序，並將其綁定到模板中的FusionCharts組件中。
>我可以自定義FusionCharts Chart的外觀嗎？ FusionCharts提供了廣泛的自定義選項(xiàng)。您可以自定義顏色，字體，邊框，背景等。這些選項(xiàng)可以在圖表配置中設(shè)置。

>如何導(dǎo)出我的FusionCharts圖表？您可以將圖表導(dǎo)出為圖像，PDF或SVG。要啟用導(dǎo)出，您需要將導(dǎo)出選項(xiàng)設(shè)置為圖表配置中的true。

>如何通過FusionCharts圖表進(jìn)行調(diào)試問題？

FusionCharts提供了調(diào)試模式，可登錄有關(guān)詳細(xì)信息的詳細(xì)信息圖表渲染過程。要啟用調(diào)試模式，請?jiān)趫D表配置中將DebugMode選項(xiàng)設(shè)置為true。然後，您可以在瀏覽器的控制臺中查看日誌。