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

j5fpnvbx 于 2023-03-27 发布在其他

关注(0)|答案(3)|浏览(146)

我试图使用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>

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

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', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
]);

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

Html

来源：https://stackoverflow.com/questions/68551489/lightweight-charts-doesnt-show-on-html-page

3条答案

按热度按时间

evrscar21#

我假设你没有使用webpack或任何bundler。
对于要考虑的module，您需要以不同的方式导入库，并按照chart.js脚本中的import 'https://unpkg.com/lightweight-charts@latest/dist/lightweight-charts.standalone.production.js';，然后按照文档中的建议使用它。

赞(0）回复(0）举报 2023-03-27

a5g8bdjr2#

确保把https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js放在你的头中，它必须在头中，否则将无法工作。

赞(0）回复(0）举报 2023-03-27

nue99wik3#

我使用CDN和unpkg方法让lightweight-charts在HTML页面中工作。
在我的HTML文件中：

URL https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js位于标头中的script标记中。
JavaScript文件test.js位于主体内的script标记中。
两个脚本标记中都需要type="module"。

我的HTML文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test Chart</title>
    <script type="module" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
</head>
<body style="background-color:black;">

    <!-- create a container for the first chart -->
    <div id="chart1" style="width: 600px; height: 400px;"></div>
    <!-- create and configure the first chart -->
    <script type="module" src="{{ url_for('static', filename='test.js') }}"></script>
</body>
</html>

我的JavaScript文件test.js如下所示。注解掉前两行：

// import { createChart } from 'lightweight-charts'; # Comment out this line.

// const chart = createChart(document.getElementById("chart1"), { width: 400, height: 300 }); # Replace this line with the line below.
const chart = LightweightCharts.createChart("chart1", { 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', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
]);

赞(0）回复(0）举报 2023-03-27

我来回答

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

3条答案

相关问题

热门标签

最新问答