轻量级图表不显示在 html 页面上

问题描述

我正在尝试使用 Lightweight-charts-library 在我的网页上使用图表，但该图表不会显示。这是我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script type = "module" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
    <title>Socket Streams</title>
</head>

<body>
    <h1>Trades</h1>

    <div id ="chart"></div>
    <div id ="Trades"></div>



    <script>
        var binanceSockets = new WebSocket("wss://stream.binance.com:9443/ws/dogebtc@Trade")
        var TradeDiv = document.getElementById('Trades');

        binanceSockets.onmessage = function (event){
            console.log(event.data);
            var object = JSON.parse(event.data);
            TradeDiv.append(object.p);
        }   
         
    </script>


    <script src="chart.js" type="module"></script>
    
</body>
</html>

我的目标是在“图表”div 上显示图表，所以我基本上从轻量级图表库中复制粘贴了这段代码，使其指向图表。

import { createChart } from 'lightweight-charts';

const chart = createChart(document.getElementById("chart"),{ width: 400,height: 300 });
const lineseries = chart.addLineseries();
lineseries.setData([
    { time: '2019-04-11',value: 80.01 },{ time: '2019-04-12',value: 96.63 },{ time: '2019-04-13',value: 76.64 },{ time: '2019-04-14',value: 81.89 },{ time: '2019-04-15',value: 74.43 },{ time: '2019-04-16',{ time: '2019-04-17',{ time: '2019-04-18',{ time: '2019-04-19',{ time: '2019-04-20',]);

如果我从 type = module 中删除 <script src="chart.js"></script>，我会得到 Uncaught SyntaxError: Cannot use import statement outside a module。 javascript的文件名为charts.js

解决方法

我假设您没有使用 webpack 或任何打包程序。

要考虑 module，您需要以不同方式导入库，并按照 import 'https://unpkg.com/lightweight-charts@latest/dist/lightweight-charts.standalone.production.js'; 脚本中的 chart.js 操作，然后按照 {{3} }.