- FusionCharts Beginner’s Guide:The Official Guide for FusionCharts Suite
- Sanket Nadhani Pallav Nadhani Shamasis Bhattacharya
- 361字
- 2021-08-27 11:58:18
Time for action — setting currency notes as the chart background
- Create a copy of
ChartBackground.html
andChartBackground.xml
, and rename them toImageBackground.html
andImageBackground.xml
respectively. Also make the change in XML data URL. - Change the chart type to
Column2D.swf
inImageBackground.html
using the following line of code:var myChart = new FusionCharts("../FusionCharts/Column2D.swf", "myChartId", "400", "300", "0", "1" );
- Find a nice background image with currency notes. You can either search for an image shared under the Creative Commons license at http://search.creativecommons.org/ or use the beautiful image at http://www.flickr.com/photos/amagill/3367543296/sizes/z/in/photostream/. Save it as
money.jpg
in theCustomizingCharts
folder. - Add the attribute
canvasbgAlpha='0'
to the<chart>
element, and removebgColor='CCCCCC'
. - Add the attributes
bgImage='money.jpg' bgImageAlpha='30' bgImageDisplayMode='fit'
. - Open
ImageBackground.html
in a browser to see money sprayed behind the revenue figures in the chart, as shown in the following screenshot:
What just happened?
We changed the chart type to the 2D Column chart as it brings out the background image much better. In a 3D chart, the canvas would come in the way of the image and removing the canvas is not an option as that would leave the columns hanging in thin air. After finding a nice image to go with the chart, we removed the background color of the chart and made the canvas of the chart transparent to get a full view of the currency notes.
To add a background image, all we had to do was specify the relative path of the image to the bgImage
attribute. Due to security restrictions, your image file has to reside on the same sub-domain as the chart file and a relative path to it has to be specified. Thereafter, we reduced the transparency of the image using bgImageAlpha
so that it did not hinder the comprehensibility of the chart. Finally, to get the image to fit proportionately on the entire chart, we set bgImageDisplayMode
to fit. There are other modes that you can select from as well: Stretch, Tile, Fill, and Center. You can either pick any of these modes or manually set the scaling and alignment of the images using the attributes discussed at www.fusioncharts.com/docs | Quick Chart Configuration | Chart Border & Background.
- Functional Python Programming
- C和C++安全編碼(原書第2版)
- Cassandra Data Modeling and Analysis
- 機(jī)器學(xué)習(xí)與R語言實戰(zhàn)
- Nginx Lua開發(fā)實戰(zhàn)
- Microsoft Azure Storage Essentials
- R用戶Python學(xué)習(xí)指南:數(shù)據(jù)科學(xué)方法
- 時空數(shù)據(jù)建模及其應(yīng)用
- Mastering Docker
- Java程序設(shè)計與項目案例教程
- 從零開始學(xué)Android開發(fā)
- Delphi開發(fā)典型模塊大全(修訂版)
- C語言從入門到精通
- 深入理解Java虛擬機(jī):JVM高級特性與最佳實踐
- Head First Kotlin程序設(shè)計