highchart报表在项目中的引用

wolaoreme

2016-09-23

highchart报表插件在项目中的引用

一、镶嵌iframe

<div id="chart_djsb" style="display: none">
<iframe id="iframe_djsb" src="" external="true" width="100%" height="500">

</iframe> 
</div>

<script src="/chart/raphael.js" type="text/javascript" />
<script src="/chart/g.raphael.js" type="text/javascript" />
<script src="/chart/g.bar.js" type="text/javascript" />
<script src="/chart/g.line.js" type="text/javascript" />
<script src="/chart/g.pie.js" type="text/javascript" />
<script src="/chart/g.dot.js" type="text/javascript" />
<script type="text/javascript" charset="utf-8">
	function chart() {
		$("#table_djsb").css("display", "none");
		$("#chart_djsb").css("display", "block");	
		var cityId = $("#djsb_city").val();
		var countryId = $("#w_combox_country").val();
		var townId = $("#w_combox_town").val();
		var createTimeStart = $("#createTimeStart").val();
		var createTimeEnd = $("#createTimeEnd").val();
		var djType = $("#djsb_djType").val();
		var data="cityId="+cityId+"&countryId="+countryId+"&townId="+townId+"&createTimeStart="+createTimeStart+"&createTimeEnd="+createTimeEnd+"&djType="+djType;		
		$("#iframe_djsb").attr('src',"/jdc/djsb/bchart.do?"+data);
	}
</script>

二、增加一个bchart.html

三、添加chart的代码

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

		<script type="text/javascript">
$(function () {

    $(document).ready(function () {
      
        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie',
                height:350
               /*  marginTop:100, */
             /*    marginBottom:150 */
            },
            credits:{
            	enabled:false
            },
            title: {
                text: '维修记录类型分析报表'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b><br/>个数：<b>{point.y}</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            legend:{
            	itemWidth:60
            },
            
            series: [{
                name: '百分比',
                colorByPoint: true,
                data: [
                    <#if mlist??>
                     <#list mlist as c>
                      {
                    	  name:decodeURI('${c.text!}'),
                    	  y:${c.num!}
                      },                
                     </#list>    
                    </#if>
                      ]
              }]
        });
    });
});
		</script>
	</head>
	<body>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<div id="container" style="height: 450px;  margin: 0 auto" ></div>

	</body>
</html>

四、查看效果

五、highchart官网地址：