Angular项目中Highcharts VBP导入后报错#17的解决咨询

问题 #

在Angular项目中尝试使用Highcharts的Volume-by-Price（VBP）功能，已确认当前安装的Highcharts版本支持VBP，且按官方文档安装了highcharts-angular与highcharts。

在searching.component.ts中导入了以下模块：

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

目录中也存在volume-by-price.ts文件，代码中series的type输入时能自动提示vbp，但运行时出现**Highcharts error #17（缺失vbp模块）**的报错。

组件中相关代码示例：

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()函数的完整代码：

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(); // 假设point[2]是高点，point[3]是低点
            const min = Math.min(...ohlcValues);
            const max = Math.max(...ohlcValues);
            let positions = [];
            let interval = (max - min) / 5; // 修改除数可以调整刻度数量
    
            for (let i = min; i <= max; i += interval) {
                positions.push(parseFloat(i.toFixed(2))); // 使用toFixed处理浮点数精度问题
            }
    
            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的方式？

解决方案 #

1. 手动挂载模块到Highcharts实例 #

调整导入代码，显式将模块挂载到Highstock实例上，避免自动导入时的依赖注册问题：

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

// 手动注册模块
Indicators(Highcharts);
VBP(Highcharts);

2. 确认版本兼容性 #

检查package.json中highcharts和highcharts-angular的版本匹配度，VBP在Highstock v9+版本才稳定支持，若版本过低，执行升级命令：

npm install highcharts@latest highcharts-angular@latest

3. 动态添加VBP系列 #

先初始化基础图表，再通过addSeries方法动态添加VBP系列，规避初始化时的模块加载异常：

// 初始化不含VBP的基础图表
const chart = Highcharts.stockChart('containerChart', {
  // 你的基础配置（移除原series中的vbp项）
});

// 动态添加VBP系列
chart.addSeries({
  type: 'vbp',
  linkedTo: 'cast',
  params: {
    volumeSeriesID: 'volume'
  },
  dataLabels: {
    enabled: false
  }
});

4. 排除Angular构建的树摇优化 #

Angular生产构建可能会摇掉未被直接引用的模块，在angular.json中添加允许的CommonJS依赖：

"build": {
  "options": {
    "allowedCommonJsDependencies": [
      "highcharts",
      "highcharts/highstock",
      "highcharts/indicators/volume-by-price"
    ]
  }
}

内容的提问来源于stack exchange，提问作者Usha