我可以使用 ChartJS 将十字准线与 OHLC/candlestick 图表一起使用吗

Question

我已经安装了十字准线插件并使用 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()

Answer 1

crosair 插件尚不兼容版本 3 的新测试版。他们有一个 pr 与测试版 11 保持同步，但此后又出现了重大更改。所以你必须自己更新插件或者等到它更新到支持 v3

我可以使用 ChartJS 将十字准线与 OHLC/candlestick 图表一起使用吗

Can i use crosshairs with OHLC/candlestick charts using ChartJS

javascript

chart.js

ohlc