高级交易视图未显示

Question

正在致力于在 nextjs 14 上集成 TradingView Advanced，但图表无法显示我已经通过使用默认参数并尝试其他参数设置了我的交易小部件，但仍然无法显示图表

我的控制台上没有出现任何错误，看起来一切都很好，但图表没有显示

下面是代码块

const defaultWidgetProps={
    symbol: "AAPL",
    interval: "1D",
    datafeedUrl: 'https://demo_feed.tradingview.com',
    library_path: "/static/charting_library/charting_library/",
    locale: "en",
    charts_storage_url: "*",
    charts_storage_api_version: "1.0",
    client_id: "https://ezfrx.com/",
    user_id: "https://ezfrx.com/",
    fullscreen: false,
    autosize: false,
    studiesOverrides: {},
    
  };
  



 useEffect(() => {

console.log(props)
const widgetOptions = {
  symbol: props.widget_data.symbol,
  // BEWARE: no trailing slash is expected in feed URL
  datafeed: new window.Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
  interval: props.widget_data.interval,
  container: chartContainerRef.current,
  library_path: props.widget_data.libraryPath,

  locale: getLanguageFromURL() || 'en',
  disabled_features: ['header_widget'],
  enabled_features: ['study_templates'],
  charts_storage_url: props.widget_data.chartsStorageUrl,
  charts_storage_api_version: props.widget_data.chartsStorageApiVersion,
  client_id: props.widget_data.clientId,
  user_id: props.widget_data.userId,
  fullscreen: props.widget_data.fullscreen,
  autosize: props.widget_data.autosize,
  studies_overrides: props.widget_data.studiesOverrides,
  theme: 'light',
  timezone: 'Asia/Bangkok',
  debug:true,
  width:300,
  height:600
};

let tvWidget = new widget(widgetOptions);
setTvwidget(tvWidget)





tvWidget.onChartReady(() => {
  tvWidget.headerReady().then(() => {
    const button = tvWidget.createButton();
    button.setAttribute('title', 'Click to show a notification popup');
    button.classList.add('apply-common-tooltip');
    button.addEventListener('click', () => tvWidget.showNoticeDialog({
      title: 'Notification',
      body: 'TradingView Charting Library API works correctly',
      callback: () => {
        console.log('Noticed!');
      },
    }));

    button.innerHTML = 'Check API';
  });
})

if (tvWidget !== null) {
  tvWidget.remove();
  tvWidget = null;
}

}, [])

Answer 1

DASHBOARD.JS

   import {ChartingLibraryWidgetOptions,ResolutionString} from '../../../public/static/charting_library/charting_library'
import dynamic from 'next/dynamic'

const defaultWidgetProps={
        symbol: "AAPL",
        interval: "1D",
        datafeedUrl: 'https://demo_feed.tradingview.com',
        library_path: "/static/charting_library/charting_library/",
        locale: "en",
        charts_storage_url: "*",
        charts_storage_api_version: "1.0",
        client_id: "https://ezfrx.com/",
        user_id: "https://ezfrx.com/",
        fullscreen: false,
        autosize: false,
        studiesOverrides: {},
        
      };


<div className='flex overflow-y-hidden justify-center items-center mt-4 lg:w-[100%] lg:h-[80%] max-lg:w-[100%] max-lg:h-[70%] md:w-[100%] md:h-[70%] max-md:h-[100%] sm:w-[100%] sm:h-[100%] max-sm:w-[100%] max-sm:h-[100%]  '>

                                        <Chart graph={graph} widget_data={defaultWidgetProps} />
                                    </div>






CHART.JS

import { widget, version } from '../../public/static/charting_library/charting_library';
import '../../public/static/charting_library/datafeeds/udf/dist/bundle'


const chartContainerRef = useRef();
useEffect(() => {

    console.log(props)
    const widgetOptions = {
      symbol: props.widget_data.symbol,
      // BEWARE: no trailing slash is expected in feed URL
      datafeed: new window.Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
      interval: props.widget_data.interval,
      container: chartContainerRef.current,
      library_path: props.widget_data.libraryPath,

      locale: getLanguageFromURL() || 'en',
      disabled_features: ['header_widget'],
      enabled_features: ['study_templates'],
      charts_storage_url: props.widget_data.chartsStorageUrl,
      charts_storage_api_version: props.widget_data.chartsStorageApiVersion,
      client_id: props.widget_data.clientId,
      user_id: props.widget_data.userId,
      fullscreen: props.widget_data.fullscreen,
      autosize: props.widget_data.autosize,
      studies_overrides: props.widget_data.studiesOverrides,
      theme: 'light',
      timezone: 'Asia/Bangkok',
      debug:true,
      width:300,
      height:600
    };

    let tvWidget = new widget(widgetOptions);
    setTvwidget(tvWidget)

    


    
    tvWidget.onChartReady(() => {
      tvWidget.headerReady().then(() => {
        const button = tvWidget.createButton();
        button.setAttribute('title', 'Click to show a notification popup');
        button.classList.add('apply-common-tooltip');
        button.addEventListener('click', () => tvWidget.showNoticeDialog({
          title: 'Notification',
          body: 'TradingView Charting Library API works correctly',
          callback: () => {
            console.log('Noticed!');
          },
        }));

        button.innerHTML = 'Check API';
      });
    })

    if (tvWidget !== null) {
      tvWidget.remove();
      tvWidget = null;
    }

  }, [])

<div className={'p-0 lg:w-[100%] lg:h-[100vh] max-lg:w-[100%] max-lg:h-[100%] md:w-[100%] max-md:h-[100%] sm:h-[100%] max-sm:h-[100%] '}>

        <div ref={chartContainerRef} className='w-[100%] h-[100vh]'></div>


      </div>