Angular中使用chartjs-chart-financial无法渲染K线图问题

环境依赖 #

{
  "@angular/core": "^18.0.3",
  "chart.js": "^4.4.3",
  "chartjs-chart-financial": "^0.2.1",
  "ng2-charts": "^6.0.1"
}

问题现象 #

已成功实现柱状图、折线图、饼图，但独立组件中的K线图仅显示带红色边框的canvas占位框，无坐标轴、网格及K线元素。组件代码如下：

import { Component } from '@angular/core';

import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

import 'chartjs-chart-financial';


@Component({
  selector: 'naas-test',
  template: `<h3>Whisker data</h3>
  <canvas
  style="border: 1px solid red"
  baseChart
  [data]="myWiskerChartData"
  [options]="myWiskerChartOptions"
  [type]="candlestickChartType"
  aria-label="candlestck graph"></canvas>`,
  standalone: true,
  imports: [BaseChartDirective],
})
export class TestComponent {
  constructor() {}

  public candlestickChartType: ChartType = 'candlestick';

  public myWiskerChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      },
    },
  };

  public myWiskerChartData: ChartData<'candlestick'> = {
    datasets: [
     {
      label: 'my Whisker',
      data: [
        {
          "x": 1,
          "o": 59,
          "l": 59,
          "h": 59,
          "c": 59
        },
        {
          "x": 2,
          "o": 3660,
          "l": 3690,
          "h": 3750,
          "c": 3780
        },
        {
          "x": 3,
          "o": 3840,
          "l": 4020,
          "h": 4844,
          "c": 5340
        },
      ]
    }
  ]
  };
}

解决方案 #

1. 手动注册K线图类型 #

chartjs-chart-financial作为第三方插件，需要手动将其控制器和元素注册到Chart.js，否则ng2-charts无法识别该图表类型：

import { Component } from '@angular/core';
import { Chart, ChartConfiguration, ChartData, ChartType } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';
// 导入K线图所需的控制器和元素
import { CandlestickController, CandlestickElement } from 'chartjs-chart-financial';

// 注册K线图组件
Chart.register(CandlestickController, CandlestickElement);

@Component({
  // 组件元数据保持不变
})
export class TestComponent {
  // ... 其余代码
}

2. 修正数据逻辑错误 #

K线图要求数据满足最低价(l) ≤ 开盘价(o)/收盘价(c) ≤ 最高价(h)，原第二个数据点o:3660、l:3690违反该逻辑，会导致渲染异常，修正后示例：

data: [
  {
    x: 1,
    o: 59,
    l: 59,
    h: 59,
    c: 59
  },
  {
    x: 2,
    o: 3780,
    l: 3660,
    h: 3750,
    c: 3690
  },
  {
    x: 3,
    o: 3840,
    l: 4020,
    h: 4844,
    c: 5340
  },
]

3. 兼容TypeScript类型定义 #

默认ChartType枚举不包含candlestick，需用类型断言避免编译错误：

public candlestickChartType: ChartType = 'candlestick' as ChartType;

4. 触发图表强制更新（可选） #

若注册后仍无效果，可在组件初始化时手动触发图表刷新：

import { ViewChild } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';

export class TestComponent {
  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;

  ngOnInit() {
    this.chart?.refresh();
  }
}

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