我正在使用以下代码通过 highcharts 创建图表。两个 div 没问题，但我希望这两种类型的图表在一个 div 中，虽然我在这里使用了不同的数据，但我将使用相同的数据......代码是
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Csv Chart</title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/highcharts-more.js" type="text/javascript"></script>
<script src="js/modules/exporting.js" type="text/javascript"></script>
</head>
<body>
<script>
var csvChart;
var chartArea;
$(document).ready(function(){
var options = {
chart: {
renderTo: 'csv-chart',
type: 'line'
},
title: {
text: 'Fruit Consumption Line Chart'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Units'
}
},
series: []
};
$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');
console.log(data);
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
csvChart = new Highcharts.Chart(options);
});
chartArea = new Highcharts.Chart({
chart: {
renderTo: 'area-chart',
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
/* 2009-01-01 */
[1230771600000, -5.8, 0.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1231549200000, 3.1, 6.8],
[1231635600000, 0.0, 7.6],
[1231722000000, 5.6, 9.4],
[1231808400000, 3.6, 6.5],
[1231894800000, -3.6, 3.8],
[1231981200000, -6.0, -1.5],
[1232067600000, -3.8, 2.4],
[1232154000000, 1.5, 4.2],
[1232240400000, 0.0, 4.5],
[1232326800000, -1.1, 3.6],
[1232413200000, 0.5, 5.1],
[1232499600000, 0.0, 2.5],
[1232586000000, -0.6, 2.1],
[1232672400000, 0.8, 4.7],
[1232758800000, 0.6, 4.4],
[1232845200000, -3.9, 1.4],
[1232931600000, -4.3, 2.0],
[1233018000000, -6.1, -0.4],
[1233104400000, -0.3, 1.9],
[1233190800000, -2.9, 2.7],
[1233277200000, -4.0, -1.0],
[1233363600000, -4.4, -1.9],
/* 2009-12-01 */
[1259629200000, -3.3, 1.7],
[1259715600000, -2.8, -0.7],
[1259802000000, -2.7, 3.8],
[1259888400000, -0.7, 4.2],
[1259974800000, 0.3, 6.1],
[1260061200000, 2.9, 9.8],
[1260147600000, 0.0, 6.8],
[1260234000000, 0.6, 2.8],
[1260320400000, 0.1, 5.1],
[1260406800000, 2.8, 3.9],
[1260493200000, -1.2, 2.2],
[1260579600000, -4.0, -0.4],
[1260666000000, -0.7, 0.7],
[1260752400000, 0.5, 1.6],
[1260838800000, -1.0, 1.5],
[1260925200000, -7.8, -1.0],
[1261011600000, -11.9, -7.9],
[1261098000000, -13.5, -7.9],
[1261184400000, -7.8, -1.7],
[1261270800000, -11.2, -0.6],
[1261357200000, -13.1, -7.2],
[1261443600000, -13.2, -5.2],
[1261530000000, -10.9, -7.7],
[1261616400000, -8.4, -1.5],
[1261702800000, -6.1, -1.2],
[1261789200000, -2.6, -1.2],
[1261875600000, -2.9, 0.7],
[1261962000000, -2.7, 0.7],
[1262048400000, -10.8, -1.3],
[1262134800000, -11.1, -8.0],
[1262221200000, -12.2, -6.5]
]
}]
});
});
</script>
<div id="csv-chart"></div>
<div id="area-chart"></div>
</body>
</html>
现在我希望将上面的两个图表放在一个 div 中，使其看起来像下图。是否可以？
