如何在单页中显示多个高图

时间：2015-05-20 09:57:58

标签： jquery jsp highcharts

我正在尝试将jsp页面划分为四个相等的部分，以显示四个highchart。我对highchart知之甚少，但不知道如何将单个jsp页面分成四个相等的部分。我能够在jsp上显示单个图表，但实际上不知道如何在单个jsp中显示四个图表。任何人都可以帮助我。

我的jsp页面看起来像那样 enter image description here

1 个答案:

答案 0 :(得分：1)

最后，在工作了30个小时后，我发现了如何做到这一点。

  1. 要划分页面，最好的选择是使用bootstrap css 简单，给你很大的灵活性。
  2. 要显示图表，我使用了High-chart它的开源和 好。

    3. 现在我们该怎么做。 首先，我使用标签与预定义的bootstrap css类col-md-6划分页面。这意味着它将孔屏幕分成两列。如果您对此不了解，请了解bootstrap css grid system链接Bootstrap css grid。

    这就是我将屏幕分为两列第二行<div>标记

    每<div id="#">我都会显示高图。 

    <div class="container">
			<h1 align="center"><a href ="#">Different charts in one page</a></h1>
			<!--First chart-->
					<div class="col-md-6">		
						<div id="pie" style="min-width: 300px; height: 300px; margin: 30 auto"></div>	
							
					</div>
				<!--Second chart-->
					<div class="col-md-6">
						<div id="bar" style="min-width: 400px; height: 400px; margin: 30 auto"></div>
					</div>
				<!--Third chart-->
					<div class="col-md-6">
						<div id="Stacked" style="min-width: 400px; height: 300px; margin: 30 auto"></div>
					</div>
				<!--Fourth chart-->
					<div class="col-md-6">
						<div id="line" style="min-width: 600px; height: 300px; margin: 30 auto"></div>
					</div>
				<!--End of charts-->
		</div><!--for container div-->

    以下是完整代码

    确保包含HighChart js 

    <!DOCKTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>final</title>
		<!--Bootstrap source start-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<!--Bootstrap source end-->
		
		<!--highchart source start-->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="C:\Users\Global Soft\Desktop\HighChart\js\highcharts.js" type="text/javascript"></script>
	<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>			
		
		
		<style type="text/css">
			${demo.css}
		</style>
		
		<!--Pie Chart starts here-->
		<script type="text/javascript">
$(function (){
			var pieChart;
			$(document).ready(function(){
				pieChart=new Highcharts.Chart({
					chart: {
						renderTo: 'pie',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
           					
					title: {
						text: 'Browser market shares at a specific website, 2014'
					},
					
					subtitle:{
						text: ' Pie Chart'
					},
					tooltip: {
						pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: false
							},
							showInLegend: true
						}
					},
					
					series: [{
						type: 'pie',
						name: 'Browser share',
						data: [
							['Firefox',   45.0],
							['IE',       26.8],
							{
								name: 'Chrome',
								y: 12.8,
								sliced: true,
								selected: true
							},
							['Safari',    8.5],
							['Opera',     6.2],
							['Others',   0.7]
						]
					}]
				
					
			});
			
		});	
		<!--Pie chart ends here-->
		
		
		<!--bar stacked chart start here-->
		$('#Stacked').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
		<!--bar stacked chart end here  -->
		
		<!--bar chart start here-->
    $('#bar').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'horizontal',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 34]
        }]
    });
	
		<!--bar chart start here-->
		
		<!--Line chart start here-->
		$('#line').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
	
	<!--Line chart ends here-->
		
		

});<!--This is for the main function-->






	</script>
						

		<!--Charts end here-->

		
	</head>
	
	<body>
		
		<div class="container">
			<h1 align="center"><a href ="#">Different charts in one page</a></h1>
			<!--First chart-->
					<div class="col-md-6">		
						<div id="pie" style="min-width: 300px; height: 300px; margin: 30 auto"></div>	
							
					</div>
				<!--Second chart-->
					<div class="col-md-6">
						<div id="bar" style="min-width: 400px; height: 400px; margin: 30 auto"></div>
					</div>
				<!--Third chart-->
					<div class="col-md-6">
						<div id="Stacked" style="min-width: 400px; height: 300px; margin: 30 auto"></div>
					</div>
				<!--Fourth chart-->
					<div class="col-md-6">
						<div id="line" style="min-width: 600px; height: 300px; margin: 30 auto"></div>
					</div>
				<!--End of charts-->
		</div><!--for container div-->
	</body>
</html>

    <强> 输出

    enter image description here

    当你把它放在一些非常令人沮丧的地方时......但是当你实现它之后经过了很多努力和努力工作， 然后感觉是awesomeeeeeeeeeeeeeeeeeeeeee。

相关问题
最新问题