请帮我写一份,普通html对接tradingview k线图的程序。且使用自己的数据源
时间: 2024-05-13 11:17:49 浏览: 332
简单的k线图代码
4星 · 用户满意度95%
好的,以下是一份基本的 HTML 文件,可以用于对接 TradingView K线图,并使用自己的数据源:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TradingView K线图</title>
<!-- 引入TradingView的样式文件 -->
<link href="https://unpkg.com/lightweight-charts@3.0.3/css/lightweight-charts.css" rel="stylesheet" />
<style>
/* 设置 K 线图容器的高度 */
#tv_chart_container {
height: 500px;
}
</style>
</head>
<body>
<!-- K 线图容器 -->
<div id="tv_chart_container"></div>
<!-- 引入TradingView的脚本文件 -->
<script src="https://unpkg.com/lightweight-charts@3.0.3/js/lightweight-charts.standalone.production.js"></script>
<script>
// 创建一个新的K线图实例
const chart = LightweightCharts.createChart(document.getElementById("tv_chart_container"), {
width: 600, // 设置K线图的宽度
height: 500, // 设置K线图的高度
});
// 创建一个新的数据源
const candlestickSeries = chart.addCandlestickSeries();
// TODO: 替换成自己的数据源
fetch("https://api.mydatasource.com/kline")
.then((response) => response.json())
.then((data) => {
// 将数据传入 K 线图
candlestickSeries.setData(data);
})
.catch(console.error);
</script>
</body>
</html>
```
在上面的代码中,需要替换 TODO 注释下方的数据源地址为自己的数据源,以便在 K 线图中显示自己的数据。同时,可以根据需要调整 K 线图容器的高度和宽度。
阅读全文