jQuery插件FusionCharts實現的2D面積圖效果示例【附demo源碼下載】

2019-11-19 17:17:42

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery插件FusionCharts實現的2D面積圖效果。分享給大家供大家參考，具體如下：

1、實現代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FusionCharts2D面積圖</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts/fusioncharts.charts.js"></script> <script type="text/javascript">  FusionCharts.ready(function () {   var salesChart = new FusionCharts({    type: 'area2d',    renderAt: 'area2D',    width: '1290',    height: '600',    dataFormat: 'json',    dataSource: {     "chart": {      "caption": "(武林網)年度收入",      "subCaption": "",      "xAxisName": "季度",      "yAxisName": "收入",      "numberPrefix": "￥",      "paletteColors": "#1275c2",      "bgColor": "#CCCCCC",      "showBorder": "1",      "showCanvasBorder": "1",      "plotBorderAlpha": "10",      "usePlotGradientColor": "10",      "plotFillAlpha": "50",      "showXAxisLine": "1",      "axisLineAlpha": "25",      "divLineAlpha": "10",      "showValues": "1",      "showAlternateHGridColor": "0",      "captionFontSize": "14",      "subcaptionFontSize": "14",      "subcaptionFontBold": "0",      "toolTipColor": "#ffffff",      "toolTipBorderThickness": "1",      "toolTipBgColor": "#FF0000",      "toolTipBgAlpha": "60",      "toolTipBorderRadius": "5",      "toolTipPadding": "10",      "baseFont":"20"     },     "data": [      {       "label": "(VeVB.COm)第一季度",       "value": "59865"      },      {       "label": "(VeVB.COm)第二季度",       "value": "63254"      },      {       "label": "(VeVB.COm)第三季度",       "value": "34256"      },      {       "label": "(VeVB.COm)第四季度",       "value": "89562"      }     ]    }   }).render();  }); </script> </head> <body> <div id="area2D"></div> </body></html>

2、實現效果圖：