FusionCharts Beginner’s Guide：The Official Guide for FusionCharts Suite

上QQ阅读APP看书，第一时间看更新

Time for action — customizing the chart background

Create a folder called CustomizingCharts under LearningFusionCharts. This is the folder where we are going to store all the HTML and XML files for everything we learn in this chapter.
Copy the files FirstChart.html and Data.xml from the FirstChart folder, and rename them as ChartBackground.html and ChartBackground.xml respectively.
In ChartBackground.html, update the URL of the XML data file from Data.xml to ChartBackground.xml by setting the following parameter:
```
myChart.setXMLUrl("ChartBackground.xml");
```

In ChartBackground.xml, add the attribute bgColor='CCCCCC' to the<chart> element as shown in the following lines of code:

<chart bgColor='CCCCCC' caption='Harry&apos;s SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'>

When you open FirstChart.html in a browser, you will see the same 3D Column chart you had created earlier but with a dark gray background instead of the default white, as displayed in the following screenshot:

What just happened?

You have just taken your first step in the world of massive customization possibilities FusionCharts Suite offers. After making a copy of the first chart you created and changing the URL of the XML data file suitably, you changed the background color of the 3D Column chart from the default white to dark gray using bgColor='CCCCCC'. The attribute takes in a hex color code without the # symbol, and colors the background of the chart using it. In case you want a gradient background instead of a solid one, just add all the colors you want in the gradient to the attribute. For example, for a gradient having dark gray and white, you would need to set bgColor='CCCCCC, FFFFFF'.

Tip

Control the finer aspects of the gradient

When you assign multiple colors to the bgColor attribute to have a gradient background, there are times when you would want to control the ratio in which the colors are distributed in the gradient. With FusionCharts Suite, you have complete control over that as you do over the angle of the gradient and the transparency of the colors using simple attributes. You can learn more about these attributes in the online documentation at www.fusioncharts.com/docs | Quick Chart Configuration | Chart Border & Background. Or if you are working with a particular chart type, say the 3D Column chart, then you can learn about all the attributes it supports at www.fusioncharts.com/docs | Chart XML API | Single Series Charts | Column 3D Chart including the background. You can do this for any of the charts, or for any of the chart elements we discuss in this chapter.

Have a go hero — set a gradient fill for the canvas on a 2D Column chart

The background fill for the canvas works the same way as the chart background. You just need to prefix the attribute with canvas, so bgColor becomes canvasBgColor. Set a gradient background with these three colors , b7bf4a (light green), ffeac0 (beige) and f5b76a (light orange). Note that this will work only for a 2D Column chart and not a 3D one as the 3D canvas takes in only one color for the canvas background, on top of which it applies a precalculated 3D lighting effect.

Image as chart background

You can also add personality to your charts by adding an image as the chart background—GIF, JPEG, PNG, or an SWF file. For example, you could use an image of currency notes as the background in a chart showing monthly revenue, or you could add a watermark to the charts in the trial version of your application. You must be careful not to overdo or misuse background images in your charts, as it can severely impact the readability of the chart.