TypeScript中用columnrange图表遇Highcharts Error #17求助

问题原因 #

Error #17的触发原因是columnrange不属于Highcharts核心自带的图表类型，必须单独导入对应的模块并注册后才能使用。

解决方案 #

1. 导入并注册ColumnRange模块 #

在代码顶部添加columnrange模块的导入语句，并调用模块函数将其注册到Highcharts实例中：

import Highcharts, { Options } from "highcharts";
import HighchartsReact from "highcharts-react-official";
// 新增：导入columnrange模块
import columnrange from "highcharts/modules/columnrange";
import * as React from "react";

// 新增：将模块注册到Highcharts
columnrange(Highcharts);

2. 配置验证 #

你的图表配置已经正确使用了columnrange要求的数据格式（数组或low/high键值对），无需额外调整配置内容。

修改后的完整代码 #

import Highcharts, { Options } from "highcharts";
import HighchartsReact from "highcharts-react-official";
import columnrange from "highcharts/modules/columnrange";
import * as React from "react";

columnrange(Highcharts);

export const Example: React.FC = () => {
  const chartOptions: Options = {
    chart: {
      type: 'columnrange',
      width: 25,
      height: 30,
      backgroundColor: 'transparent',
      ignoreHiddenSeries: true
  },

  title: {
      text: ''
  },

  xAxis: [
      {
          visible: false,
          minPadding: 0,
          maxPadding: 0,
          minorTickLength: 0,
          tickLength: 0,
          labels: {
              enabled: false // disable labels
          }
      }
  ],
  yAxis: [
      {
          visible: false,
          minPadding: 0,
          maxPadding: 0,
          title: { text: null },
          gridLineWidth: 0,
          labels: {
              enabled: false // disable labels
          }
      }
  ],
  plotOptions: {
      series: {
          states: {
              hover: {
                  enabled: false
              }
          }
      }
  },

  tooltip: {
      enabled: false
  },

  legend: {
      enabled: false
  },

  series: [
      {
          type: 'columnrange',
          data: [
              [10, 90],
              [20, 50],
              [5, 90],
              [40, 120],
              [20, 50],
              [5, 90],
              { low: 40, high: 150, color: '#3f8eeb' }
          ],
          dataLabels: { enabled: false },
          groupPadding: 0.2,
          color: '#79b1f1'
      },
      {
          type: 'scatter',
          data: [
              [0, 15],
              [1, 43],
              [2, 37],
              [3, 45],
              [4, 43],
              [5, 37],
              [6, 100]
          ],
          marker: {
              fillColor: 'white',
              duration: false
          }
      }
  ],

  navigation: {
      buttonOptions: {
          enabled: false
      }
  },
  credits: {
      enabled: false
  }
  };

  return (
    <>
      <HighchartsReact highcharts={Highcharts} options={chartOptions} />
    </>
  );
};

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