类型脚本中的列范围错误:Highcharts错误17:www.highcharts.com/errors/17/?missingModuleFor=columnrange-缺少模块针对:列范围

x6yk4ghg  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(259)

嘿:我尝试在打字稿中使用columnchart,但出现以下错误:Highcharts错误17:www.highcharts.com/errors/17/?missingModuleFor=columnrange-缺少以下模块:列范围
我知道我必须导入一些模块,但是我不知道在导入之后具体要使用什么以及如何使用。下面是我代码:

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

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 },
          /* states: {
              hover: {
                  enabled: false
              }},*/
          groupPadding: 0.2,
          color: '#79b1f1'
      },
      {
          type: 'scatter',
          data: [
              // x, y positions where 0 is the first category
              [0, 15],
              [1, 43],
              [2, 37],
              [3, 45],
              [4, 43],
              [5, 37],
              [6, 100]
          ],
          marker: {
              fillColor: 'white',
              duration: false
              //lineWidth: 0.2,
              //lineColor: Highcharts.getOptions().colors[0]
              // size: 0.3
          }
      }
  ],

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

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

这是一个打字稿的项目。谢谢!

pcww981p

pcww981p1#

columnrange系列类型包含在highcharts-more模块中,因此需要导入并初始化该模块:

import Highcharts from "highcharts";
import HCMore from "highcharts/highcharts-more";

HCMore(Highcharts);

实时演示:https://codesandbox.io/s/highcharts-react-demo-fork-50ti69?file=/演示.jsx
API引用:https://api.highcharts.com/highcharts/series.columnrange
**文档:**https:www.npmjs.com/package/highcharts-react-official#how-to-add-a-module

相关问题