집 > 기사 > 웹 프론트엔드 > jQuery 플러그인 FusionCharts로 그린 3D 이중 막대 차트

jQuery 플러그인 FusionCharts로 그린 3D 이중 막대 차트

小云云원래의: 2018-01-17 14:30:481877검색

이 글에서는 주로 jQuery 플러그인 FusionCharts로 그린 3D 이중 히스토그램 효과를 소개하며, xml 데이터와 결합된 플러그인 FusionCharts를 사용하여 jQuery로 그린 3D 이중 히스토그램 관련 조작 기술이 포함되어 있습니다. 그것이 모두에게 도움이 되기를 바랍니다.

1. 3D 이중 기둥 차트 페이지의 소스 코드는 다음과 같습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FusionCharts 3D双柱状图</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">
$(function(){
 var column3D = new FusionCharts( "FusionCharts/MSColumn3D.swf", "myChartId", "100%", "520", "0" );
 column3D.setXMLUrl("doubleColumn3D.xml");
 column3D.render("doubleColumn3DChart");
});
</script>
</head>
<body>
  <p id="doubleColumn3DChart"></p>
</body>
</html>

2. 3D 이중 기둥 차트 데이터 소스 doubleColumn3D.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption=&#39;(jb51.net统计)2015年和2016年统计收入&#39; xAxisName=&#39;月份&#39; yAxisName=&#39;收入&#39; showValues=&#39;0&#39; baseFont=&#39;微软雅黑&#39; baseFontSize=&#39;14&#39;
    baseFontColor=&#39;#00FF00&#39; outCnvBaseFont=&#39;宋体&#39; outCnvBaseFontSize=&#39;16&#39; outCnvBaseFontColor=&#39;#798777&#39; showAboutMenuItem=&#39;1&#39;
    showLabels=&#39;1&#39; labelDisplay=&#39;ROTATE &#39; useEllipsesWhenOverflow=&#39;1&#39; rotateLabels=&#39;1&#39; slantLabels=&#39;1&#39; staggerLines=&#39;2&#39;
    labelStep=&#39;3&#39; placeValuesInside=&#39;1&#39; showYAxisValues=&#39;1&#39; showLimits=&#39;1&#39; showpLineValues=&#39;1&#39; showShadow=&#39;1&#39; adjustp=&#39;1&#39;
    setAdaptiveYMin=&#39;1&#39; centerYaxisName=&#39;1&#39; useRoundEdges=&#39;1&#39; numpLines=&#39;8&#39; pLineColor=&#39;#987989&#39; pLineIsDashed=&#39;1&#39;>
  <categories>
   <category label=&#39;一月&#39; />
   <category label=&#39;二月&#39; />
   <category label=&#39;三月&#39; />
   <category label=&#39;四月&#39; />
   <category label=&#39;五月&#39; />
   <category label=&#39;六月&#39; />
   <category label=&#39;七月&#39; />
   <category label=&#39;八月&#39; />
   <category label=&#39;九月&#39; />
   <category label=&#39;十月&#39; />
   <category label=&#39;十一月&#39; />
   <category label=&#39;十二月&#39; />
  </categories>
  <dataset seriesName=&#39;2015&#39;>
   <set value=&#39;45155&#39; />
   <set value=&#39;12452&#39;/>
   <set value=&#39;63455&#39; />
   <set value=&#39;45233&#39; />
   <set value=&#39;95656&#39; />
   <set value=&#39;87545&#39; />
   <set value=&#39;12425&#39; />
   <set value=&#39;94633&#39; />
   <set value=&#39;85452&#39; />
   <set value=&#39;75455&#39; />
   <set value=&#39;32312&#39; />
   <set value=&#39;65625&#39; />
  </dataset>
  <dataset seriesName=&#39;2016&#39;>
   <set value=&#39;65655&#39;/>
   <set value=&#39;74555&#39;/>
   <set value=&#39;61245&#39;/>
   <set value=&#39;12451&#39;/>
   <set value=&#39;95656&#39; />
   <set value=&#39;24655&#39; />
   <set value=&#39;45122&#39; />
   <set value=&#39;32656&#39; />
   <set value=&#39;65656&#39; />
   <set value=&#39;95666&#39; />
   <set value=&#39;65323&#39; />
   <set value=&#39;54656&#39; />
  </dataset>
</chart>

3은 다음과 같습니다. 아래

jQuery 플러그인 FusionCharts로 그린 3D 이중 막대 차트

관련 기사