如何在一个html页面上显示两个高图表

Question

我试图在一个HTML页面上一个接一个地显示两个HighCharts图，但没有成功，我受到了这个链接上的答案的启发。

这是我的html页面的主要部分：

<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<h1>Page de visualisation des graphes générés</h1>

<figure class="highcharts-figure">
<div id="chart-A" class="chart"></div>
<div class="spacer"></div>
<div id="chart-B" class="chart"></div>
<p class="highcharts-description">
This chart shows how data labels can be added to the data series. This
can increase readability and comprehension for small datasets.
</p>
<script type="text/javascript">
$(function() {   
$('#chart-A').highcharts({
chart: {
renderTo: 'chart-A'
type: "line"
},
colors: ['#0000FF', '#0066FF', '#00CCFF'],
title: {
text: "Monthly Average Temperature"
},
subtitle: {
text: "Source: WorldClimate.com"
},
xAxis: {
categories: [
'Jan',
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
yAxis: {
title: {
text: "Temperature (°C)"
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [
{
name: "Tokyo",
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
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]
}
]
});
$('#chart-B').highcharts({
chart: {
renderTo: 'chart-B'
type: "line"
},
colors: ['#0000FF', '#0066FF', '#00CCFF'],
title: {
text: "Monthly Average Temperature"
},
subtitle: {
text: "Source: WorldClimate.com"
},
xAxis: {
categories: [
'Jan',
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
yAxis: {
title: {
text: "Temperature (°C)"
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [
{
name: "Tokyo",
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
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]
}
]
});
});
</script>
</figure>

这是我的CSS代码：

.highcharts-figure, .highcharts-data-table table {
min-width: 360px; 
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
.spacer {
height: 20px;
}
.chart {
height: 200px;
}

我试着把我的代码放在这里：http://jsfiddle.net/n0t6xw9y/

提前感谢您的帮助，

CHERIF哈基姆

Answer 1

最后感谢Chris纠正了我的代码。

有一些语法错误我没有看到。