如何在一个html页面上显示两个Highcharts图？

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.netn0t6xw9y

先谢谢你的帮助。

CHERIFHakim

Answer 1

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

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