码迷,mamicode.com
首页 > 其他好文 > 详细

最新版FusionCharts2D面积图

时间:2019-02-13 12:22:22      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:nat   idt   lin   charts   tran   var   ansi   ber   rip   

1、实现源码

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>最新版FusionCharts2D面积图</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="<%=basePath%>/js/jquery-2.2.3.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/fusioncharts/js/fusioncharts.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/fusioncharts/js/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": "第一季度",
		                    "value": "59865"
		                }, 
		                {
		                    "label": "第二季度",
		                    "value": "63254"
		                }, 
		                {
		                    "label": "第三季度",
		                    "value": "34256"
		                }, 
		                {
		                    "label": "第四季度",
		                    "value": "89562"
		                }
		            ]
		        }
		    }).render();
		});
    </script>
  </head>
  
  <body>
    <div id="area2D"></div>
  </body>
</html>

2、实现结果

 

技术图片

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

最新版FusionCharts2D面积图

标签:nat   idt   lin   charts   tran   var   ansi   ber   rip   

原文地址:https://www.cnblogs.com/odejsjhshw/p/10369098.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!