我最近发现了使用Chart.js库轻松创建图表的可能性。我已经在我的测试网站上添加了必要的元素，使用在线链接来评估库，一切都正常工作。
当我试图在本地使用整个Chart.js库时，问题就出现了。
我按照官方网站上的指南：
1.使用“npm”在正确的目录中安装。
1.修改package.json文件。
1.修改index.html文件以使用以下命令在本地添加库：

<script type="text/javascript" src="node_modules/chart.js/dist/chart.js"></script>

字符串
1.安装和添加所需的Moment.js库：

<script type="text/javascript" src="node_modules/moment/moment.js"></script>

型
下面是index.html代码：

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>MoNKER</title>
      <script type = "text/javascript" src="node_modules/chart.js/dist/chart.js"></script>
      <link rel="stylesheet" href="node_modules/css/bootstrap.min.css">
      <script type = "text/javascript" src="node_modules/jquery.js"></script>
      <script type = "text/javascript" src="node_modules/js/bootstrap.min.js"></script>
      <script type = "text/javascript" src="node_modules/moment/moment.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <nav class="navbar navbar-dark bg-dark fixed-top">
      <style>
          .col-mon {
              text-align: center;
              border: 4px solid #ccc;
              padding: 10px;
              margin: 0 10px 10px 0;
          }
          .col-logo {
            text-align: right;
            margin: 0 auto;
            width: 100%;
          }
      </style>
      <div class="row">
        <div class="col-sm">
          <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
              <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
              </div>
              <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Dropdown
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">Another action</a></li>
                      <li>
                        <hr class="dropdown-divider">
                      </li>
                      <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                  </li>
                </ul>
                <form class="d-flex mt-3" role="search">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-success" type="submit">Search</button>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="col-logo">
            <img class="logo" src="img/monker.png" width="250px" height="auto">
          </div>
        </div>
      </div>
    </nav>
    <div class="container">
    </div>
<br><br><br><br><br>
        <div class="row">
            <div class="col-sm">
              <div class="col-mon">
                <h2>Air</h2>
              <canvas id="airChart"> </canvas>
              </div>
            </div>
            <div class="col-sm">
              <div class="col-mon">
                <h2>CAMs</h2>
                <br><br><br><br><br><br>
              </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
var airData = {
    labels: ['Tempo 1', 'Tempo 2', 'Tempo 3', 'Tempo 4', 'Tempo 5'],
    datasets: [
        {
            label: 'Kw 50',
            data: [40, 10, 50, 200, 20],
            borderColor: 'rgba(255, 99, 132, 1)',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
        },
        {
            label: 'Kw 100',
            data: [20, 30, 40, 50, 80],
            borderColor: 'rgba(75, 192, 192, 1)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
        },
    ],
};
var ctx = document.getElementById('airChart').getContext('2d');
var airChart = new Chart(ctx, {
    type: 'line',
    data: airData,
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

型
这是文件路径和文件的图像（不包括“old”和“img”文件夹：

的数据
因此，我认为这仅仅是库的配置问题。提前感谢。
正如我之前提到的，我尝试了在线和离线两种模式，前者可以工作，而后者不行。尽管我使用HTML和JavaScript的时间很短，但我可能在安装软件包时犯了一个错误。

1条答案

按热度按时间

j2datikz1#

如果你使用的是“node_modules/chart.js/dist/chart.js”，你必须确保你的服务器可以访问那些要服务的文件，但是在节点模块中服务文件.由于安全原因，这是一个坏主意。
使用一个类似rollup的插件可以解决这个问题，将所有的js文件打包到一个文件中，这个文件可以放在sources目录中，并由服务器提供
在文档中，它指定您应该使用umd.js文件：https://www.chartjs.org/docs/latest/getting-started/integration.html#script-tag

赞(0）回复(0）举报 2024-01-04

html Chart.js完全本地模式

1条答案

相关问题

热门标签

最新问答