JavaScript圖表工具FusionCharts Suite XT入門教程（八）：添加特殊字符

FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業的JavaScript圖表。

• JavaScript圖表工具，為什么選擇FusionCharts？點擊了解！

點擊下載FusionCharts Suite XT最新試用版

FusionCharts提供了多種選項來格式化圖表上的數字。您可以基于預定義的刻度來配置數字前綴和后綴，小數位和刻度數字。本文重點介紹如何自定義圖表上數字的前綴和后綴。

要自定義圖表上數字的前綴和后綴，請使用以下屬性：

• 使用numberPrefix屬性為圖表上的所有值指定前綴。請注意，僅當您沒有特別提及yNumberPrefixand xNumberPrefix屬性的值時，此屬性的值才有效。

• 使用yNumberPrefix屬性為圖表上所有Y軸值指定前綴。如果您不提及此屬性，則圖表將從該屬性繼承默認值numberPrefix。

• 使用xNumberPrefix屬性為圖表上所有X軸值指定前綴。如果您不提及此屬性，則圖表將從該屬性繼承默認值numberPrefix。

• 使用numberSuffix屬性為圖表上的所有值指定后綴。請注意，僅當您沒有特別提及yNumberSuffixand xNumberSuffix屬性的值時，此屬性的值才有效。

• 使用yNumberSuffix屬性為圖表上的所有Y軸值指定后綴。如果您不提及此屬性，則圖表將從該屬性繼承默認值numberSuffix。

• 使用xNumberSuffix屬性為圖表上所有X軸值指定后綴。如果您不提及此屬性，則圖表將從該屬性繼承默認值numberSuffix。

配置為自定義圖表數字前綴的圖表如下所示：

上面示例的完整代碼如下：

import FusionCharts from 'fusioncharts';import Charts from 'fusioncharts/fusioncharts.charts';import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';// Add the chart and theme as dependencyFusionCharts.addDep(Charts);FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Monthly revenue for last year",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Month",
            "yAxisName": "Revenues (In USD)",
            "numberPrefix": "$", //Special Character
            "theme": "fusion"
        },
        "data": [{
            "label": "Jan",
            "value": "420000"
        }, {
            "label": "Feb",
            "value": "810000"
        }, {
            "label": "Mar",
            "value": "720000"
        }, {
            "label": "Apr",
            "value": "550000"
        }, {
            "label": "May",
            "value": "910000"
        }, {
            "label": "Jun",
            "value": "510000"
        }, {
            "label": "Jul",
            "value": "680000"
        }, {
            "label": "Aug",
            "value": "620000"
        }, {
            "label": "Sep",
            "value": "610000"
        }, {
            "label": "Oct",
            "value": "490000"
        }, {
            "label": "Nov",
            "value": "900000"
        }, {
            "label": "Dec",
            "value": "730000"
        }]
    }});// RenderchartInstance.render();

上圖通過以下步驟呈現：

1、使用包括必要的庫和組件import。例如fusioncharts圖書館等

2、將圖表和主題添加為依賴項。

3、將圖表配置存儲在JSON對象中。在JSON對象中：

• 將圖表類型設置為column2d。
  

• 設置圖表的寬度和高度（以像素為單位）。
  

• 將設置dataFormat為JSON。
  

• 將json數據嵌入為的值dataSource。

4、在dataSource對象中，numberPrefix在chart對象中添加屬性。將設置numberPrefix為$。

想要了解或購買FusionCharts Suite XT正版授權的朋友歡迎咨詢

關注“慧聚IT”微信公眾號，及時獲取產品最新消息和最新資訊