错误错误：Highcharts 错误 #17：www.highcharts.com/errors/17/?missingModuleFor=vbp -missingModuleFor：vbp。我已经导入了所需的模块

Question

我正在尝试在我的角度项目中使用 highchart 的成交量价格。我检查了当前安装的 highcharts 版本是否支持 vbp，它确实支持。我已经安装了 highcharts Angular 和 Highcharts 并按照文档中所述导入。我遵循的步骤来自此链接（https://www.npmjs.com/package/highcharts-angular#installing）。自从我在searching.components.ts中使用它以来，我就在其中使用了它组件并导入了需要 import 'highcharts/indicators/indicators' 的其他模块；导入“高图表/指标/成交量价格”；并检查我的指标是否存在volume-by-price.ts。它包含在提供的路径中，并且 vbp 已经存在，并且当我在“系列”中输入“类型”时它会自动出现。它显示错误： core.mjs:7473 ERROR Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=vbp -missingModuleFor: vbp at Object. (highstock.js:8: 138) 在 C (highstock.js:8:2591) 在 r (highstock.js:8:61) 在 k.initSeries (highstock.js:8:195150) 在 highstock.js:8:210174 在 Array.forEach ( ) 在 k.firstRender (highstock.js:8:210152) 在 k. (highstock.js:8:195068) 在 C (highstock.js:8:2591) 在 k.init (highstock.js:8: 194486）。我在searching.component.ts中的完整代码（在顶部包含这些行： import * as Highcharts from 'highcharts/highstock'; import 'highcharts/indicators/indicators'; import 'highcharts/indicators/volume-by-price' ;）。我在我的打字稿中使用了这个（searching.component.ts）：

    series: [{
    type: 'candlestick',
    name: 'CAST',
    id: 'cast',
    zIndex: 2,
    data: ohlc
    }, 
    {
    type: 'column',
    name: 'Volume',
    id: 'volume',
    data: volume,
    yAxis: 1,
    threshold: null ,
    pointRange: 1,
    pointWidth: 5
    },{
    type :'vbp',
    linkedTo: 'cast',
    params: {
    volumeSeriesID: 'volume'
    },
    dataLabels:
    {
    enabled: false
    }
    }]  

当用户单击图表时，函数中存在以下代码，调用函数 getDetails() 并且 getDetails() 具有以下代码：

Highcharts.stockChart('containerChart',
{ 
rangeSelector: { selected: 1 }, 
title: { text: 'SMA' }, 
subtitle: { text: 'With SMA and Volume by Price technical indicators' }, 
xAxis: { type:'datetime' }, 
yAxis: [{ startOnTick: false, endOnTick: false,
   labels: {
        align: 'right',
        format: '{value:.2f}',
        x: -3
    },
    title: {
        text: 'OHLC'
    },
   height: '60%',
    lineWidth: 2,
    resize: {
        enabled: true
    },
    tickPositions: (() => {
      const ohlcValues = ohlc.map(point => [point[2], point[3]]).flat(); // Assuming point[2] is high and point[3] is low for each point
      const min = Math.min(...ohlcValues);
      const max = Math.max(...ohlcValues);
      let positions = [];
      let interval = (max - min) / 5; // Adjust the number of ticks by changing the divisor
  
      for (let i = min; i <= max; i += interval) {
          positions.push(parseFloat(i.toFixed(2))); // Adding toFixed to handle floating-point precision
      }
  
      console.log("Min:", min, "Max:", max, "Tick positions:", positions);
      return positions;
    })(),
}, {
    labels: {
        align: 'right',
        x: -3,
        formatter: function() {
          return (+(this.value) / 1e6) + 'M'; }
    },
    title: {
        text: 'Volume'
    },
    tickPositions: [0, 50e6, 100e6, 150e6],
    top: '65%',
    height: '35%',
    offset: 0,
    lineWidth: 2,
}],
tooltip: {
    split: true
},
plotOptions: {
  series: {
    dataGrouping: {
        enabled: false, 
    }
},
column: {
    pointPadding: 0,
    groupPadding: 0,
    borderWidth: 0,
    shadow: false,
    pointWidth: 3, 
}, },
series: [{
    type: 'candlestick',
    name: 'CAST',
    id: 'cast',
    zIndex: 2,
    data: ohlc
}, {
    type: 'column',
    name: 'Volume',
    id: 'volume',
    data: volume,
    yAxis: 1,  
    threshold: null ,
    pointRange: 1,
    pointWidth: 5
},{
  type :'vbp',
  linkedTo: 'cast',
  params: {
    volumeSeriesID: 'volume'
  },
  dataLabels:
  {
    enabled: false
  }
}
  ] });

如果我必须包含任何其他模块，或者我可以以任何其他方式实现 vbp，您能否告诉我？

Answer 1

您需要正确导入并初始化 Highstock、指标和成交量模块。

例如：

import * as Highcharts from 'highcharts/highstock';
import indicators from 'highcharts/indicators/indicators';
import volumeByPrice from 'highcharts/indicators/volume-by-price';

indicators(Highcharts);
volumeByPrice(Highcharts);

---

现场演示：https://stackblitz.com/edit/highcharts-angular-line-cmca2i

文档：https://github.com/highcharts/highcharts-angular?tab=readme-ov-file#to-load-a-module