Question

我已经成功使用CSV文件在Highcharts上显示箱形图，但现在我试图在同一个图表上显示另一个csv文件作为散点图，我不知道知道如何。

这是我的代码适用于boxplot：

＆＃13;

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>

<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://code.highcharts.com/highcharts-more.js"></script>
<script src = "https://code.highcharts.com/modules/exporting.js"></script>
<script src=  "https://code.highcharts.com/modules/data.js"></script>

<script type = "text/javascript">
$(document).ready(function() {

$.get('850_temp2.csv', function(csv) {

var lines = csv.split('\n');
//alert(lines[1]);

	$('#container').highcharts({
		chart: {
			type: 'boxplot'
		},
		data: {
			//firstRowAsNames: false,
			//startRow: 2,
			
			//endRow: 15,
			csv: csv
		},
		title: {
			text: '850mb temps'
		},
		xaxis: {
			categories: []
		},
		yaxis: {
			title: {
				text: 'Units'
			}
				

		},
		yAxis: { plotLines: [{
				color: 'darkblue',
				width: 2,
				value: 3.5,
				zIndex: 100,
				label: {
					text: '<b>Crater Lake</b>'
									
					}
				
				
			}, {
				color: 'darkblue',
				width: 2,
				value: 1,
				zIndex: 100,
				label: {
					text: '<h2><b>Lake of the Woods</b></h2>'
									
					}

			}, {
				color: 'darkblue',
				width: 2,
				value: 0,
				zIndex: 100,
				label: {
					text: '<h2><b>Siskiyou Summit</b></h2>'
									
					}
			}, {
				color: 'darkblue',
				width: 2,
				value: -3,
				zIndex: 100,
				label: {
					text: '<h2><b>Sexton Pass</b></h2>'
									
					}

			}, {
				color: 'darkblue',
				width: 2,
				value: -5,
				zIndex: 100,
				label: {
					text: '<h2><b>Medford</b></h2>'
									
					}


		}]	


						


		}


		
		

	});
	});
});



//$('#container').highcharts(Highcharts.merge(options));

//options.data.switchRowsAndColumns = !options.data.switchRowsAndColumns;








</script>


</head>

<body>


<div id = "container" style="width:1100px; height: 700px; margin: 0 auto">
</div>

</body>
</html>

＆＃13;

这是我的代码，我试图用它来显示第二个CSV文件。我看了一遍，我找不到能解决这个问题的东西。这是csv文件。

850_temp2.csv

hour,one,two,three,four,five
0,3.0, 4.0, 5.0, 2.0, 5.0
6,2, -1.0, 0.0, -3.0, 2.0 
12,4.0, 4.0, 5.0, 6.0, 7.0 
18,13.0, 12.0, 11.0, 10.0, 10.0 
24,13.0, 13.0, 12.0, 11.0, 6.0 
30,8.0, 8.0, 8.0, 9.0, 11.0

和 precp.csv

hour,one,two,three,four,five
0,0.0, 0.4, 0.3, 0.6, 0.4
6,0.6, 0.4, 0.5, 0.6, 0.7
12,0.1, 0.1, 0.05, 0.04, 0.03
18,0.0, 0.0, 0.0, 0.03, 0.02
24,0.0, 0.0, 0.0, 0.0, 0.0
30,0.0, 0.0, 0.0, 0.0, 0.0

感谢您的帮助。

＆＃13;

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>

<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://code.highcharts.com/highcharts-more.js"></script>
<script src = "https://code.highcharts.com/modules/exporting.js"></script>
<script src=  "https://code.highcharts.com/modules/data.js"></script>

<script type = "text/javascript">
$(document).ready(function() {

$.get('850_temp2.csv', function(csv) {

	$.get('precp.csv', function(csv2) {

var lines = csv2.split('\n');
alert(lines[1]);
	
	$('#container').highcharts({
	
	
			

		
		
		yAxis: { plotLines: [{
				color: 'darkblue',
				width: 2,
				value: 3.5,
				zIndex: 100,
				label: {
					text: '<b>Crater Lake</b>'
									
					}
				
				
			}, {
				color: 'darkblue',
				width: 2,
				value: 1,
				zIndex: 100,
				label: {
					text: '<h2><b>Lake of the Woods</b></h2>'
									
					}

			}, {
				color: 'darkblue',
				width: 2,
				value: 0,
				zIndex: 100,
				label: {
					text: '<h2><b>Siskiyou Summit</b></h2>'
									
					}
			}, {
				color: 'darkblue',
				width: 2,
				value: -3,
				zIndex: 100,
				label: {
					text: '<h2><b>Sexton Pass</b></h2>'
									
					}

			}, {
				color: 'darkblue',
				width: 2,
				value: -5,
				zIndex: 100,
				label: {
					text: '<h2><b>Medford</b></h2>'
									
					}


			}]
			}, //y axis close	

			series: [{
			type: 'line',
			name: 'pcpn',
			data: csv2
			},{
			type: 'boxplot',
			name: '850mbT',
			data: csv
			}]
			
						
	

		

		




		
	


	

	}); //highcharts container close
	}); //precip csv close
	}); //850temp csv close

}); //document ready close








//$('#container').highcharts(Highcharts.merge(options));

//options.data.switchRowsAndColumns = !options.data.switchRowsAndColumns;








</script>


</head>

<body>


<div id = "container" style="width:1100px; height: 700px; margin: 0 auto">
</div>

</body>
</html>

＆＃13;

基本上，我想绘制这两种图表类型，但在同一图表上。我当然需要添加适用于散点图值的第二个y轴。

Highcharts：多个CSV和多种图表类型

0 个答案: