vue 使用tradingview修改主题色等等配置（第二天）

上一篇文件链接（关于引入文件的一些说明）：

vue使用tradingview生成k线图（第一天）_草字的博客-CSDN博客

如果你不幸下载到了旧版，或者是网上的一些其他版本，可能在修改k线图的时候永远都改不动canvas元素的背景色，我当时也差不多处理了一天时间，最后一用官网的项目，直接就行了。

然后这里我将官网的项目和我的vue测试项目都上传了。

资源链接：tradingview的官网项目和我的demo项目，official.rar_charting-library-互联网文档类资源-CSDN下载

创作不易，希望支持，让我多赚点积分。

背景色改不动，配置不生效的原因，需要禁用本地配置：

disabled_features: ["use_localstorage_for_settings"],

注意：在我们调样式的时候，需要禁用本地配置，因为tradingview会优先使用本地配置的颜色，只要运行加载过一次k线图，那么tradingview就会保存相关的配置，下次加载就会使用本地的配置，所以我们改不动。

背景色改不动，也跟主题色属性有关，不能存在主题色属性：

theme: "dark",//"light"

完整结构：

var widget = new TradingView.widget({
            fullscreen: true,
            symbol: 'AAPL',
            interval: '1D',
            container: "tv_chart_container",
            //	BEWARE: no trailing slash is expected in feed URL
            datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),//数据
            library_path: "charting_library/",
            locale: getParameterByName('lang') || "en",

            disabled_features: ["use_localstorage_for_settings"],
            preset: "mobile",
            overrides: {
                "paneProperties.background": "#212121",
                "paneProperties.vertGridProperties.color": "#454545",
                "paneProperties.horzGridProperties.color": "#454545",
                "scalesProperties.textColor" : "#AAA"
            }
        });

资源文件说明：

charting_library：官网项目，tradingview-demo我的vue演示项目，如果直接去官网下载需要填写很多东西，不希望其他人也这么麻烦，就提供给大家资源。

官网项目启动方法：js from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for_草字的博客-CSDN博客

从上面文章里面的链接跳转到另一个链接哈，需要两次跳转。

官网项目的演示文件说明：

mobile_white：白色移动端
mobile_black：黑色移动端
themed：自定义工具栏样式

推荐文档：

tradingview官网：https://cn.tradingview.com/lightweight-charts/

4-3、Widget 方法 - TradingView 中文开发文档

CSS主题颜色 · TradingView中文开发文档

https://tradingview.gitee.io/featuresets/

配置文件的相关说明，希望对你有用（不要直接粘贴使用哈，只做参考）：

theme:'Dark',
    fullscreen: false,
    autosize: true,
    symbol:null,//函数赋值
    // symbol:this_vue.currency1 + ":"+ this_vue.currency2,
    container_id: "chart_container",
    datafeed:null,//函数赋值
    // datafeed: this_vue.feed,
    library_path: "/custom_scripts/chart_main/",//包文件
    custom_css_url: 'chart.css',
    locale: `${_vm.$t("locale")}`,//语言，en：英文，zh：中文
    timezone: 'Etc/UTC', //todo: ustawianie timezone'a po strefie usera
    charts_storage_api_version: "1.1",
    client_id: 'tradingview.com',
    user_id: 'public_user_id',
    debug: true,
    //加载中样式
    // loading_screen:{ backgroundColor: "#00ff00",foregroundColor: "#000000", }, //todo:do it
    interval: '60',
    // timeframe:'',//todo: na koncu
    toolbar_bg: "#212121",//"#20334d",
    // saved_data: this.savedData,
    allow_symbol_change: true,
    time_frames: [
        {text: "1y", resolution: "1W"},
        {text: "6m", resolution: "3D"},
        {text: "3m", resolution: "1D"},
        {text: "1m", resolution: "1D"},
        {text: "1w", resolution: "30"},
        {text: "3d", resolution: "30"},
        {text: "1d", resolution: "30"},
        {text: "6h", resolution: "15"},
        {text: "1h", resolution: "1"}],
    //图纸访问
    drawings_access: {
        type: 'black',
        tools: [{name: "Regression Trend"}]//todo: moje
        // tools: [{name: "Trend Line", grayed: true}, {name: "Trend Angle", grayed: true}] //todo: bb
    },
    //禁用的功能
    disabled_features: [
        "header_symbol_search",
        "header_interval_dialog_button",
        "show_interval_dialog_on_key_press",
        "symbol_search_hot_key",
        "study_dialog_search_control",
        "display_market_status",
        "header_compare",
        "edit_buttons_in_legend",
        "symbol_info",
        "border_around_the_chart",
        "main_series_scale_menu",
        "star_some_intervals_by_default",
        "datasource_copypaste",
        "right_bar_stays_on_scroll",
        "context_menus",
        "go_to_date",
        "compare_symbol",
        "border_around_the_chart",
        "timezone_menu",
        //左右移动，缩放，重置
        // "header_resolutions",//todo: przetestowac
        // "control_bar",//todo: przetestowac
        // "edit_buttons_in_legend",//todo: przetestowac
        "remove_library_container_border",
        "adaptive_logo"
    ],
    //开启的功能
    enabled_features: [
        "dont_show_boolean_study_arguments",
        "use_localstorage_for_settings",
        "remove_library_container_border",
        "save_chart_properties_to_local_storage",
        "side_toolbar_in_fullscreen_mode",//全屏模式启动绘图功能
        "hide_last_na_study_output",
        // "hide_left_toolbar_by_default",//当用第一次进入隐藏左部工具栏
        "constraint_dialogs_movement",//todo: nie do końca jestem pewien
        // "move_logo_to_main_pane",//logo位置
        "chart_property_page_background"
    ],
    //覆盖
    studies_overrides: {
        "volume.volume.color.0": "#fe4761",
        "volume.volume.color.1": "#3fcfb4",
        "volume.volume.transparency": 75,
    },
    //覆盖
    overrides: {
        "paneProperties.background": "#ff0000",
        // "indicator_name.input_name":"volume",
        "symbolWatermarkProperties.color": "rgba(0,0,0, 0)",
        // "paneProperties.background": "#20334d",//"#20334d",
        //网格
        "paneProperties.vertGridProperties.color": "#ff00000",
        "paneProperties.horzGridProperties.color": "#344568",
        "paneProperties.crossHairProperties.color": "#58637a",
        "paneProperties.crossHairProperties.style": 2,
        "mainSeriesProperties.style": 9,
        "mainSeriesProperties.showCountdown": false,
        "scalesProperties.showSeriesLastValue": true,
        "mainSeriesProperties.visible": false,
        "mainSeriesProperties.showPriceLine": false,
        "mainSeriesProperties.priceLineWidth": 1,
        "mainSeriesProperties.lockScale": false,
        "mainSeriesProperties.minTick": "default",
        "mainSeriesProperties.extendedHours": false,
        "volumePaneSize": "tiny",
        editorFontsList: ["Lato", "Arial", "Verdana", "Courier New", "Times New Roman"],
        "paneProperties.topMargin": 5,
        "paneProperties.bottomMargin": 5,
        "paneProperties.leftAxisProperties.autoScale": true,
        "paneProperties.leftAxisProperties.autoScaleDisabled": false,
        "paneProperties.leftAxisProperties.percentage": false,
        "paneProperties.leftAxisProperties.percentageDisabled": false,
        "paneProperties.leftAxisProperties.log": false,
        "paneProperties.leftAxisProperties.logDisabled": false,
        "paneProperties.leftAxisProperties.alignLabels": true,
        // "paneProperties.legendProperties.showStudyArguments": true,
        "paneProperties.legendProperties.showStudyTitles": true,
        "paneProperties.legendProperties.showStudyValues": true,
        "paneProperties.legendProperties.showSeriesTitle": true,
        "paneProperties.legendProperties.showSeriesOHLC": true,
        "scalesProperties.showLeftScale": false,
        "scalesProperties.showRightScale": true,
        "scalesProperties.backgroundColor": "#212121",//"#20334d",
        // 坐标轴和刻度标签颜色
        "scalesProperties.lineColor": "#46587b",
        "scalesProperties.textColor": "#8f98ad",
        "scalesProperties.scaleSeriesOnly": false,
        "mainSeriesProperties.priceAxisProperties.autoScale": true,
        "mainSeriesProperties.priceAxisProperties.autoScaleDisabled": false,
        "mainSeriesProperties.priceAxisProperties.percentage": false,
        "mainSeriesProperties.priceAxisProperties.percentageDisabled": false,
        "mainSeriesProperties.priceAxisProperties.log": false,
        "mainSeriesProperties.priceAxisProperties.logDisabled": false,
        "mainSeriesProperties.candleStyle.upColor": "#3fcfb4",
        "mainSeriesProperties.candleStyle.downColor": "#fe4761",
        "mainSeriesProperties.candleStyle.drawWick": true,// 烛心
        "mainSeriesProperties.candleStyle.drawBorder": true,//边框
        "mainSeriesProperties.candleStyle.borderColor": "#3fcfb4",
        "mainSeriesProperties.candleStyle.borderUpColor": "#3fcfb4",//边框颜色
        "mainSeriesProperties.candleStyle.borderDownColor": "#fe4761",//边框颜色
        "mainSeriesProperties.candleStyle.wickColor": "#737375",
        "mainSeriesProperties.candleStyle.wickUpColor": "#3fcfb4",// 烛心颜色
        "mainSeriesProperties.candleStyle.wickDownColor": "#fe4761",
        "mainSeriesProperties.candleStyle.barColorsOnPrevClose": false,
        "mainSeriesProperties.hollowCandleStyle.upColor": "#3fcfb4",
        "mainSeriesProperties.hollowCandleStyle.downColor": "#fe4761",
        "mainSeriesProperties.hollowCandleStyle.drawWick": true,
        "mainSeriesProperties.hollowCandleStyle.drawBorder": true,
        "mainSeriesProperties.hollowCandleStyle.borderColor": "#3fcfb4",
        "mainSeriesProperties.hollowCandleStyle.borderUpColor": "#3fcfb4",
        "mainSeriesProperties.hollowCandleStyle.borderDownColor": "#fe4761",
        "mainSeriesProperties.hollowCandleStyle.wickColor": "#737375",
        "mainSeriesProperties.hollowCandleStyle.wickUpColor": "#3fcfb4",
        "mainSeriesProperties.hollowCandleStyle.wickDownColor": "#fe4761",
        "mainSeriesProperties.haStyle.upColor": "#3fcfb4",
        "mainSeriesProperties.haStyle.downColor": "#fe4761",
        "mainSeriesProperties.haStyle.drawWick": true,
        "mainSeriesProperties.haStyle.drawBorder": true,
        "mainSeriesProperties.haStyle.borderColor": "#3fcfb4",
        "mainSeriesProperties.haStyle.borderUpColor": "#3fcfb4",
        "mainSeriesProperties.haStyle.borderDownColor": "#fe4761",
        "mainSeriesProperties.haStyle.wickColor": "#737375",
        "mainSeriesProperties.haStyle.wickUpColor": "#3fcfb4",
        "mainSeriesProperties.haStyle.wickDownColor": "#fe4761",
        "mainSeriesProperties.haStyle.barColorsOnPrevClose": false,
        "mainSeriesProperties.barStyle.upColor": "#3fcfb4",
        "mainSeriesProperties.barStyle.downColor": "#fe4761",
        "mainSeriesProperties.barStyle.barColorsOnPrevClose": false,
        "mainSeriesProperties.barStyle.dontDrawOpen": false,
        "mainSeriesProperties.lineStyle.color": "#0cbef3",
        "mainSeriesProperties.lineStyle.linestyle": 0,
        "mainSeriesProperties.lineStyle.linewidth": 1,
        "mainSeriesProperties.lineStyle.priceSource": "close",
        "mainSeriesProperties.areaStyle.color1": "#0cbef3",
        "mainSeriesProperties.areaStyle.color2": "#0098c4",
        "mainSeriesProperties.areaStyle.linecolor": "#0cbef3",
        "mainSeriesProperties.areaStyle.linestyle": 0,
        "mainSeriesProperties.areaStyle.linewidth": 1,
        "mainSeriesProperties.areaStyle.priceSource": "close",
        "mainSeriesProperties.areaStyle.transparency": 80
    }