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”微信公众号，及时获取产品最新消息和最新资讯