嘿:我尝试在打字稿中使用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} />
</>
);
};
这是一个打字稿的项目。谢谢!
1条答案
按热度按时间pcww981p1#
columnrange
系列类型包含在highcharts-more
模块中,因此需要导入并初始化该模块:实时演示: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