tradingview的配置和h5交互和jsbrige和ui定制

最新推荐文章于 2025-03-15 15:24:12 发布
最新推荐文章于 2025-03-15 15:24:12 发布
阅读量282 收藏
点赞数 5
分类专栏： tradingview 文章标签： 交互 ui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43084836/article/details/143052103
版权 
<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import { widget } from "../../public/charting_library";
import Datafeed from "@/api/tv/datafeed.js";

const chartContainer = ref();
let chartWidget;
let macdStudy;
let rsiStudy;
let emaStudy;
let kdjStudy;
let bollStudy;
let volStudy;
let maStudy;
let williamsRStudy;
let macStudy;

onMounted(() => {
    const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

    const widgetOptions = {
        symbol: "BTCUSDT",
        interval: "1",
        container: chartContainer.value,
        datafeed: Datafeed,
        library_path: "/charting_library/",
        locale: getLanguageFromURL() || "zh",
        debug: false,
        // has_intraday: true,
        disabled_features: [
            "header_symbol_search", // 禁用符号搜索栏
            "header_interval_dialog", // 禁用时间区间选择
            "header_compare", // 禁用比较按钮
            "header_saveload", // 禁用保存和加载布局的功能
            "header_fullscreen_button", // 禁用全屏按钮
            'header_indicators', // 禁用指标按钮
            "header_undo_redo", // 禁用撤销/重做按钮
            "header_screenshot", // 禁用截图按钮
            "header_resolutions", // 禁用时间分辨率选择
            "header_chart_type", // 禁用图表类型选择
            "header_settings", // 禁用设置按钮
            "context_menus", //右击隐藏
            "symbol_search_hot_key",
            "left_toolbar",
            // "control_bar",
            "go_to_date",
            "header_saveload",
            "items_favoriting",
            "show_object_tree",
            "show_interval_dialog_on_key_press",
            // 'legend_widget',
            "header_quick_search",
            "legend_symbol_search",
            "use_localstorage_for_settings",
            "timeframes_toolbar", //底部的bar
            "header_widget",//头部的bar
            "main_series_scale_menu"//右下角设置隐藏
        ],
        enabled_features: ["hide_resolution_in_legend"],
        timezone: localTimezone,
        time_frames: [
            // 自定义时间范围按钮
        ],
        "study_count_limit": 3,

        autosize: true,
    };

    if (getStyle() == "dark") {
        widgetOptions.overrides = {
            "paneProperties.background": "#222630",
            "paneProperties.vertGridProperties.color": "#303A47",
            "paneProperties.horzGridProperties.color": "#303A47",

            "scalesProperties.textColor": "#ffffff",
        };
    } else {
        widgetOptions.overrides = {
            "paneProperties.background": "#ffffff",
            "paneProperties.vertGridProperties.color": "#EBEBEB",
            "paneProperties.horzGridProperties.color": "#EBEBEB",

            "scalesProperties.textColor": "#000000",
        };
    }

    window.chartWidget = chartWidget = new widget(widgetOptions);

    chartWidget.onChartReady(() => {

        setTimeout(() => {
            hidetoolbar();
        }, 1000);
        

        connectWebViewJavascriptBridge(function (bridge) {
            bridge.init(function (message, responseCallback) {
                var data = {
                    "Javascript Responds": "Android调用JS初始化方法!",
                };
                responseCallback(data);
            });

            bridge.registerHandler("openktype", function (data, responseCallback) {
                openktype();

                responseCallback(responseData);
            });
            bridge.registerHandler("openstudy", function (data, responseCallback) {
                openstudy();

                responseCallback(responseData);
            });
            bridge.registerHandler(
                "setResolution",
                function (data, responseCallback) {
                    if (data == "1s") {
                        chartWidget.chart().setResolution(1);
                        chartWidget.activeChart().setChartType(3);
                    } else {
                        chartWidget.activeChart().setChartType(1);
                        if (data == "3d") {
                            chartWidget.chart().setResolution(4320);
                        }
                        chartWidget.chart().setResolution(data);

                    }

                    responseCallback(responseData);
                }
            );
            bridge.registerHandler("openmacd", function (data, responseCallback) {
                
                
                if (data == "true") {

                    openmacd();
                } else {
                    closemacd();
                }

                responseCallback(responseData);
            });
            
            bridge.registerHandler("openWRStudy", function (data, responseCallback) {
                if (data == "true") {
                    openWRStudy();
                } else {
                    closeWRStudy();
                }

                responseCallback(responseData);
            });
            bridge.registerHandler("openEMAStudy", function (data, responseCallback) {
                if (data == "true") {
                    openEMAStudy();
                } else {
                    closeEMAStudy();
                }

                responseCallback(responseData);
            });
            bridge.registerHandler(
                "openBOLLStudyOnMainChart",
                function (data, responseCallback) {
                    if (data == "true") {
                        openBOLLStudyOnMainChart();
                    } else {
                        closeBOLLStudyOnMainChart();
                    }

                    responseCallback(responseData);
                }
            );

            bridge.registerHandler(
                "openAVGVolStudy",
                function (data, responseCallback) {
                    if (data == "true") {
                        openAVGVolStudy();
                    } else {
                        closeAVGVolStudy();
                    }

                    responseCallback(responseData);
                }
            );
            bridge.registerHandler("openKDJStudy", function (data, responseCallback) {
                if (data == "true") {
                    openKDJStudy();
                } else {
                    closeKDJStudy();
                }

                responseCallback(responseData);
            });
            bridge.registerHandler("openRSIStudy", function (data, responseCallback) {
                if (data == "true") {
                    openRSIStudy();
                } else {
                    closeRSIStudy();
                }

                responseCallback(responseData);
            });
            bridge.registerHandler("openVOLStudy", function (data, responseCallback) {
                if (data == "true") {
                    openVOLStudy();
                } else {
                    closeVOLStudy();
                }

                responseCallback(responseData);
            });

            bridge.registerHandler("openma", function (data, responseCallback) {
                if (data == "true") {
                    openma();
                } else {
                    closema();
                }

                responseCallback(responseData);
            });

            

            bridge.registerHandler("openMAC", function (data, responseCallback) {
                if (data == "true") {
                    openMAC();
                } else {
                    closeMAC();
                }

                responseCallback(responseData);
            });
            bridge.registerHandler("changeTheme", function (data, responseCallback) {
                changeTheme(data);

                responseCallback(responseData);
            });

            bridge.registerHandler("closemacd", function (data, responseCallback) {
                closemacd();

                responseCallback(responseData);
            });

            bridge.registerHandler("closeWRStudy", function (data, responseCallback) {
                closeWRStudy();

                responseCallback(responseData);
            });

            bridge.registerHandler("closeEMAStudy", function (data, responseCallback) {
                closeEMAStudy();

                responseCallback(responseData);
            });

            bridge.registerHandler("closeBOLLStudyOnMainChart", function (data, responseCallback) {
                closeBOLLStudyOnMainChart();

                responseCallback(responseData);
            });
            bridge.registerHandler("closeSARStudy", function (data, responseCallback) {
                closeSARStudy();

                responseCallback(responseData);
            });
            bridge.registerHandler("closeKDJStudy", function (data, responseCallback) {
                closeKDJStudy();

                responseCallback(responseData);
            });
            bridge.registerHandler("closeRSIStudy", function (data, responseCallback) {
                closeRSIStudy();

                responseCallback(responseData);
            });
            bridge.registerHandler("closeVOLStudy", function (data, responseCallback) {
                closeVOLStudy();

                responseCallback(responseData);
            });
            bridge.registerHandler("closema", function (data, responseCallback) {
                closema();

                responseCallback(responseData);
            });
            bridge.registerHandler("closeMAC", function (data, responseCallback) {
                closeMAC();

                responseCallback(responseData);
            });

        });

        window.openktype = openktype;
        window.openstudy = openstudy;
        window.hidetoolbar = hidetoolbar;
        window.setResolution = setResolution;

        window.openmacd = openmacd;
        window.openma = openma;
        window.openWRStudy = openWRStudy;
        window.openEMAStudy = openEMAStudy;
        window.openBOLLStudyOnMainChart = openBOLLStudyOnMainChart;
        
        window.openKDJStudy = openKDJStudy;
        window.openRSIStudy = openRSIStudy;
        window.openVOLStudy = openVOLStudy;

        window.closemacd = closemacd;
        window.closeWRStudy = closeWRStudy;
        window.closeEMAStudy = closeEMAStudy;
        window.closeBOLLStudyOnMainChart = closeBOLLStudyOnMainChart;
        
        window.closeKDJStudy = closeKDJStudy;
        window.closeRSIStudy = closeRSIStudy;
        window.closeVOLStudy = closeVOLStudy;
        window.closema = closema;
        window.changeTheme = changeTheme;
        window.openMAC=openMAC;
        window.closeMAC=closeMAC;

        
    });
});

const hidetoolbar = () => {
    const indicatorsButton = getdom(".layout__area--top", false);
    if (indicatorsButton) {
        //透明为空
        indicatorsButton.style.top = "-38px";
    } else {
        console.log("Cannot find the Indicators button.");
    }

    //隐藏al
    const price = getdom(".price-axis__modeButtons", false);
    if (price) {
        //透明为空
        price.remove();
    } else {
        console.log("Cannot find the al button.");
    }
    //隐藏底部
    const bottom = getdom(".chart-toolbar", false);
    if (bottom) {
        //透明为空
        bottom.remove();
    } else {
        console.log("Cannot find the bottom button.");
    }
    

    //隐藏标的
    const symbol = getdom("div[data-name='legend-series-item']", false);
    if (symbol) {
        //透明为空
        symbol.removeChild(symbol.firstChild);
    } else {
        console.log("Cannot find the symbol.");
    }


    
};

const setResolution = (data) => {
    if (data == "1s") {
        chartWidget.chart().setResolution(1);
        chartWidget.activeChart().setChartType(3);
    } else {
        chartWidget.chart().setResolution(data);
        chartWidget.activeChart().setChartType(1);
    }
};
const changeTheme = (data) => {
    chartWidget.changeTheme(data);
};

const connectWebViewJavascriptBridge = (callback) => {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge);
    } else {
        document.addEventListener(
            "WebViewJavascriptBridgeReady",
            function () {
                callback(WebViewJavascriptBridge);
            },
            false
        );
    }
};

const openstudy = () => {
    const indicatorsButton = getdom(
        'button[data-name="open-indicators-dialog"]',
        false
    );
    if (indicatorsButton) {
        indicatorsButton.click(); // 模拟点击内置指标按钮
    } else {
        console.log("Cannot find the Indicators button.");
    }
};
const openktype = () => {
    let indicatorsButton = null;
    const Candlesbutton = getdom('button[aria-label="Candles"]', false);
    const kbutton = getdom('button[aria-label="K线图"]', false);
    Candlesbutton
        ? (indicatorsButton = Candlesbutton)
        : (indicatorsButton = kbutton);
    if (indicatorsButton) {
        indicatorsButton.click(); // 模拟点击内置指标按钮
    } else {
        console.log("Cannot find the Indicators button.");
    }
};


const openMAC= async()=> {
   macStudy=await chartWidget.chart().createStudy('Moving Average Channel', false, {}, [14])
   console.log(macStudy);
}

const closeMAC = () => {
    if (macStudy) {
        console.log(macStudy);
        chartWidget.chart().removeEntity(macStudy);
        macStudy = null;
    }
};

const openmacd = async () => {
    macdStudy = await chartWidget
        .chart()
        .createStudy("MACD", false, false, [], null, {});
    console.log(macdStudy);
};
const closemacd = () => {
    if (macdStudy) {
        console.log(macdStudy);
        chartWidget.chart().removeEntity(macdStudy);
        macdStudy = null;
    }
};
const openma = async () => {
    maStudy = await chartWidget
        .chart()
        .createStudy("Moving Average Multiple", false, false, [], null, {});
};
const closema = () => {
    if (maStudy) {
        chartWidget.chart().removeEntity(maStudy);
        maStudy = null;
    }
};

const openEMAStudy = async () => {
    emaStudy = await chartWidget.chart().createStudy(
        "Moving Average Exponential",
        false,
        false,
        { length: 20 },
        {
            "plot.color": "#FF00FF", // 设置 EMA 线的颜色为紫色
            "plot.linewidth": 2, // 设置 EMA 线的宽度为 2
            "plot.linestyle": 0, // 设置 EMA 线的样式为实线
        }
    );
};
const closeEMAStudy = () => {
    if (emaStudy) {
        chartWidget.chart().removeEntity(emaStudy);
        emaStudy = null;
    }
};
const openBOLLStudyOnMainChart = async () => {
    bollStudy = await chartWidget.chart().createStudy(
        "Bollinger Bands",
        true,
        false,
        { length: 20, deviation: 2 },
        {
            "upper.linewidth": 2, // 设置上轨线的宽度
            "lower.linewidth": 2, // 设置下轨线的宽度
            "basis.color": "#0000FF", // 设置中线的颜色为蓝色
            "upper.color": "#FF0000", // 设置上轨线的颜色为红色
            "lower.color": "#00FF00", // 设置下轨线的颜色为绿色
        }
    );
    console.log(bollStudy);
};
const closeBOLLStudyOnMainChart = () => {
    if (bollStudy) {
        console.log(bollStudy);
        chartWidget.chart().removeEntity(bollStudy);
        bollStudy = null;
    }
};


const openKDJStudy = async () => {
    kdjStudy = await chartWidget
        .chart()
        .createStudy("Stochastic", false, false, [], {
            "K.color": "#FF0000", // 设置 K 线的颜色为红色
            "D.color": "#0000FF", // 设置 D 线的颜色为蓝色
            "J.color": "#00FF00", // 设置 J 线的颜色为绿色
            "plot.linewidth": 2, // 设置线条的宽度
        });
};
const closeKDJStudy = () => {
    if (kdjStudy) {
        chartWidget.chart().removeEntity(kdjStudy);
        kdjStudy = null;
    }
};

const openRSIStudy = async () => {
    rsiStudy = await chartWidget.chart().createStudy(
        "Relative Strength Index",
        false,
        false,
        { length: 14 },
        {
            "plot.color": "#FF4500", // 设置 RSI 线的颜色为橙红色
            "plot.linewidth": 2, // 设置 RSI 线的宽度为 2
            "overbought.color": "#FF0000", // 设置超买线的颜色为红色
            "oversold.color": "#00FF00", // 设置超卖线的颜色为绿色
        }
    );
};
const closeRSIStudy = () => {
    if (rsiStudy) {
        chartWidget.chart().removeEntity(rsiStudy);
        rsiStudy = null;
    }
};

const openWRStudy = async () => {
    williamsRStudy = await chartWidget
        .chart()
        .createStudy("Williams %R", false, false, [], null, {});
};
const closeWRStudy = () => {
    if (williamsRStudy) {
        chartWidget.chart().removeEntity(williamsRStudy);
        williamsRStudy = null;
    }
};

const openVOLStudy = async () => {
    volStudy = await chartWidget.chart().createStudy("Volume", false, false, [], {
        "plot.color": "#00BFFF", // 设置成交量柱的颜色为深天蓝色
        "volume ma.length": 20, // 设置平均成交量的周期为 20
        "volume ma.color": "#FF4500", // 设置平均成交量线的颜色为橙红色
        "plot.linewidth": 2, // 设置成交量柱的宽度
    });
};
const closeVOLStudy = () => {
    if (volStudy) {
        chartWidget.chart().removeEntity(volStudy);
        volStudy = null;
    }
};

const getLanguageFromURL = () => {
    const regex = new RegExp("[\\?&]lang=([^&#]*)");
    const results = regex.exec(window.location.search);
    return results === null
        ? null
        : decodeURIComponent(results[1].replace(/\+/g, " "));
};
const getStyle = () => {
    const regex = new RegExp("[\\?&]theme=([^&#]*)");
    const results = regex.exec(window.location.search);
    return results === null
        ? null
        : decodeURIComponent(results[1].replace(/\+/g, " "));
};

const getdom = (str, all) => {
    var allElementsWithId = document.querySelectorAll("[id]");

    var tradingViewElements = Array.from(allElementsWithId).filter(function (
        element
    ) {
        return element.id.startsWith("tradingview_");
    });
    var iframeDocument =
        tradingViewElements[0].contentDocument ||
        tradingViewElements[0].contentWindow.document;

    if (all) {
        return iframeDocument.querySelectorAll(str);
    } else {
        return iframeDocument.querySelector(str);
    }
};

onUnmounted(() => {
    if (chartWidget !== null) {
        chartWidget.remove();
        chartWidget = null;
    }
});
</script>

<template>
    <div class="TVChartContainer" ref="chartContainer" />
</template>

<style scoped>
.TVChartContainer {
    width: 100%;
    height: 100vh;
}
</style>
android 和h5交互,Android中与H5的交互
weixin_33419305的博客
05-27 3903
Android日常开发中，常常会遇到加载H5页面的情况，于是少不了与H5页面的交互问题。具体表现在Android调用H5代码及H5中调用Android代码两种情况。测试页面test.png这里我们首先编写上图所示的测试页面，在MainActivity中初始化各组件private void initView() {mLoginLayout = findViewById(R.id.login_layo...
鸿蒙next web组件和h5 交互实战来了
xq610928的博客
09-12 1704
鸿蒙next web组件这个专题之前一直想讲一下 苦于没有时间，周末把代码研究的差不多了，所以就趁着现在这个时间节点分享给大家。也希望能对各位读者网友工作和学习有帮助，废话不多说我们正式开始。鸿蒙这边web组件和安卓的webview 以及ios的 wkwebview 比较像官方也给出了接口原生 ArkUI和H5能互相交互。文章案例中也给出具体的用法，各位可以查阅。如果有什么疑问也可以留言， 如果需要学习更多鸿蒙的知识可以瓜子你好我B站教程。
关于TradingView图表分析插件教程的说明以及简单用法
热门推荐
御翔宇内的专栏
04-09 4万+
from https://blog.csdn.net/q506417225/article/details/79852401大家都知道TradingView是纯英文版本APi，去年年底官方网站已支持中文浏览，但是api还是全英文支持。所以国内使用者一定遇到很多阅读困惑，同理我也遇到很多无法正确理解为汉语意思的地方。由于授权以及官方沟通方面问题，本人tradingview方面的教材暂时停止更新。后续...
TradingViewjs是一个交互性强大的K线图表库
08-10
TradingView.js是一个交互性强大的K线图表库。 您可以在图表上绘制任何文字内容。
TradingView的简单应用
最新发布
weixin_58649712的博客
03-15 974
TradingView的简单应用示例
TradingView---JS Api
程序员的诗意人生---Jesse
04-28 1万+
这是啥? 一套JS方法（特定的公共接口）。我该怎么使用它? 您应该创建一个JS对象，它将以某种方式接收数据，并响应Charting Library请求。数据缓存（历史和股票信息）在图表库中实现。当你创建一个实现描述接口的对象时，只需通过datafeed 参数将其传递给图表库Widget的构造函数。Methods1.     onReady2.     searchSymbolsByName3.  ...
TradingView简易教程(三) —— JSApi
az44yao的专栏
05-21 2205
https://blog.sakuradon.com/index.php/archives/203/ JSApi介绍 这是啥?一套JS方法（以实现指定的公共接口）。我该怎么使用它?: 您应该创建一个JS对象，它将以某种方式接收数据，并响应图表库的请求。 UDF是按照官方文档的规则来进行数据传输，但如果使用JSApi的话，你能使用任何你能使用的方式传输数据。得到的数据主要通过一个JS对象来获取并通过回调函数传递给TradingView插件。 也就是说，你需要创建一个JS对象，该对象拥有文档中规定的方.
tradingview-jsapi-binance：用于Binance交换的TradingView图表库JS API的示例实现
02-05
TradingView图表库JS API示例 安装 将图表库克隆到根目录： $ git clone https://github.com/tradingview/charting_library.git 安装模块： $ npm install 跑 运行Binance代理以允许CORS： npm run proxy 服务index.html ， datafeed.js和图表库 npm run serve
Android和H5 js交互Demo
09-04
这个压缩包中的文件很可能包含了实现上述功能的Android项目代码，包括MainActivity.java（包含WebView的配置和交互逻辑）、AndroidManifest.xml（应用配置文件）、以及可能的布局文件等。通过查看和运行这些代码，...
使用jsBridge实现H5页面和APP端交互（andriod和ios通用）
qq_36812123的博客
04-22 4450
1、通过jsBridge获取App端的token，H5定义的函数名必须和APP端对应 window.function () { // 获取请求token window.getToken=function(token){ // document.getElementById("show").innerText = token 通过dom元素可以把获取的token渲染到页面上...
TradingViewLightweightCharts是最小和最快的金融HTML5图表
08-10
小巧的封装中的顶级性能。免费、开源和功能丰富。仅需43kb，轻量级交互式图表的梦想现已成为现实。HTML5 Canvas技术确保（与图片不同）此图表在任何设备上始终都是完美的。
TradingView中文文档
11-12
TradingView中文文档,包含视图修改及API详细说明。最新版本修订。对于使用trading view作为Kline的开发者适用
tradingView开发文档
09-18
tradingView开发文档，中文版开发文档，最新修订于2018-09-06 https://cn.tradingview.com/ https://zlq4863947.gitbooks.io/tradingview/
tradingview 封装 “移动端/PC端” vue组件 介入websocket 火币数据模拟封装
11-03
tradingview 封装 “移动端/PC端” vue组件 介入websocket 火币数据模拟封装。vue-cli 3.0 模版 vue2.0 & tradingview K线图
TradingView中文开发文档 V1.1
07-20
TradingView中文开发文档 V1.1，API调用细节，可以使用
Android和js、H5进行交互数据(面试必问)
张晓辉的博客
03-29 8727
Android和H5、Js进行交互调用 Android开发过程中，我们或多或少都会用到webview，使用webview来展示一些经常变动的界面更加方便简单， 也已于维护。另一方面hybrid App开发现在用的也越来越多了。其中native和h5之间的交互更是必不可少的。 具体Android中是如何和h5交互的?或者说Android中是如何和js交互的。 1 Webview加载页面...
h5行情k线开发
DH28194657的博客
03-23 4487
前言 由于公司项目需要，要做港股行情的H5版本，经过分析需求，大致有两块难点： 一是行情的推送接收，二是行情K线的生成及相关操作。本文章主要分析行情K线的相关实现，由于我们前端团队之前是没有相关的工作经验的，所以我们第一反应就是去网上搜现成的插件或者相关文档。经过查找我们发现其实网上这方面的资料不多，相关插件也是比较少，比较符合的相关插件有tradingView以及百度团队开发的...
TradingView js api demo (二)生成测试数据
一只小小小小菜鸟
04-13 1321
这里主要是一个生成高开低收四个数值的脚本,已生成的保存到数据库,最后一条不确定的在redis 1,测试数据的表结构,建在basedata数据库下面 CREATE TABLE `hedge_basis_mode` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `interval` enum('5m','1h','1d') NOT NU...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码狼先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值