如何将 chart.js 合并到 jsp 文件中

Question

我是 javascript 的新手，必须使用 Chart.js 的库我在 jsp 文件中有以下针对按钮的说明

window.open("test.jsp", "width="+800+ "height="+580);

在 test.jsp 文件中，此代码：

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>test</title>

<script type=“text/javascript”>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/Chart.min.js"></script>
<script type=“test.jsp”>

<script type=“text/javascript”>


var ctx = document.getElementById('myChart');

var stars = [135850, 52122, 148825, 16939, 9763];
var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];

var myChart = new Chart(ctx, {
 type: 'bar',
 data: {
    labels: frameworks,
    datasets: [{
        label: 'Github Stars',
        data: stars
    }]
 },
})
</head>
<body>
 <canvas id="myChart" width="800" height="400"></canvas>

</body>
</html>

我可以打开新的 window 但我看不到里面的任何东西。我希望所有代码都在 jsp 文件中运行，而不委托给外部的 js 和 html 文件。

Answer 1

您的代码中存在不同的问题。

引用的 Chart.js 库不存在。将 ...Chart.min.js 写成 ...chart.min.js（小写）。
在 function 中定义您的自定义 JS 代码，并仅在 body 及其 canvas 完全加载后执行它 (<body onload="drawChart()">)。

请看下面运行启用HTML的代码，它应该运行类似于JSP。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

  <script type="text/javascript">
    function drawChart() {
      var stars = [135850, 52122, 148825, 16939, 9763];
      var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];
      new Chart('myChart', {
        type: 'bar',
        data: {
          labels: frameworks,
          datasets: [{
            label: 'Github Stars',
            data: stars
          }]
        },
      });
    }
  </script>
</head>

<body onload="drawChart()">
  <canvas id="myChart" width="800" height="400"></canvas>
</body>

</html>

如何将 chart.js 合并到 jsp 文件中

How to incorporate chart.js in jsp file

javascript

jsp

chart.js