Lightweight-charts引入后HTML网页无法显示图表问题求助

错误原因梳理 #

• 文件名不匹配：HTML中引用的是chart.js，但你的实际文件名为charts.js，文件加载失败自然无法渲染图表
• 库引入方式不匹配：你引入的是lightweight-charts的standalone独立打包版本，这个版本会直接在全局window对象上挂载接口，不支持ES模块的import语法，你同时混用了全局引入和模块导入的写法，导致调用失败
• 模块属性配置错误：移除type="module"会报导入语法错误，是因为import只能在ES模块环境下使用，普通脚本环境不支持该语法

解决方法（二选一即可） #

方法1：使用全局standalone版本（无需模块配置）

1. 修改HTML中head的库引入代码，移除type="module"：

<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>

2. 修改HTML中自定义脚本的引入路径，修正文件名同时移除type="module"：

<script src="charts.js"></script>

3. 修改charts.js代码，使用全局挂载的接口，移除import语句：

const chart = LightweightCharts.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 },
]);

方法2：使用ES模块引入方式

1. 移除HTML中head里的lightweight-charts的cdn引入语句
2. 保留自定义脚本的type="module"属性，同时修正文件名：

<script src="charts.js" type="module"></script>

3. 修改charts.js的import语句，直接从cdn导入ES模块版本：

import { createChart } from 'https://unpkg.com/lightweight-charts/dist/lightweight-charts.esm.production.js';

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 },
]);

内容的提问来源于stack exchange，提问作者neto