我可以使用 ChartJS 在 OHLC/烛台图表中使用十字准线吗

问题描述

我已经安装了十字准线插件并且正在使用 chartJS 3.0 来利用烛台图表，但是十字准线没有出现。这些东西是兼容的吗？我的数据似乎没有问题，但十字准线从未出现。我如何一起使用这两个东西？有没有可行的例子？

我使用的标签

    <script src="https://cdn.jsdelivr.net/npm/luxon@1.24.1"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.9/dist/chart.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.1"></script>
<script src="https://dd7tel2830j4w.cloudfront.net/f1614793727236x392906938665549250/chartjs-chart-financial.js"></script>
<script scr="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair"></script>

以及同样有效的图表代码

 var divID = "chartContainer" + properties.chartid
  var chartID = "myChart" + properties.chartid
  instance.canvas.append('<div id="' + divID + '"></div>')
  document.getElementById(divID).innerHTML = '&nbsp;';
  document.getElementById(divID).innerHTML = '<canvas id=' + chartID + ' width="' + properties.bubble.width() + '" height="' + properties.bubble.height() + '"></canvas>';







  var ctx = document.getElementById(chartID).getContext('2d');
  var chart = new Chart(ctx,{
    type: 'candlestick',data: {
      datasets: [{
        label: 'CHRT - Chart.js Corporation',data: getData()
      }]
    },options: {
      scales: {
        y: {
          min: 0,max: 500
        }
      },tooltips: {
        mode: "interpolate",intersect: false
      },plugins: {
        crosshair: {
          line: {
            color: '#F66',// crosshair line color
            width: 3,// crosshair line width
            dashPattern: [5,5] // crosshair line dash pattern
          },sync: {
            enabled: true,// enable trace line syncing with other charts
            group: 1,// chart group
            suppressTooltips: false // suppress tooltips when showing a synced tracer
          },zoom: {
            enabled: true,// enable zooming
            zoomboxBackgroundColor: 'rgba(66,133,244,0.2)',// background color of zoom box 
            zoomboxBorderColor: '#48F',// border color of zoom box
            zoomButtonText: 'Reset Zoom',// reset zoom button text
            zoomButtonClass: 'reset-zoom',// reset zoom button class
          },callbacks: {
            beforeZoom: function(start,end) { // called before zoom,return false to prevent zoom
              return true;
            },afterZoom: function(start,end) { // called after zoom
            }
          }
        }
      }
    }
  });

    
    
    
    
    
    
    

  function getData() {
    var dates = properties.time.get(0,properties.time.length())
    var opens = properties.open.get(0,properties.open.length())
    var highs = properties.high.get(0,properties.high.length())
    var lows = properties.low.get(0,properties.low.length())
    var closes = properties.close.get(0,properties.close.length())

    let data = []

    for (i = 0; i < dates.length; i++) {
      data.push({
        t: dates[i].valueOf(),o: opens[i],h: highs[i],l: lows[i],c: closes[i]
      })
    }

    console.log(data)

    return data
  }

  chart.update()

解决方法

crosair 插件尚不兼容版本 3 的新测试版。他们有一个 pr 可以与 beta 11 保持同步，但在那之后又发生了重大变化。所以你必须自己更新插件或等到它更新以支持 v3