Highcharts模式填充与Next.js堆叠的列

Question

我目前正在合并Highcharts在我的Next.js项目柱状图，但我的图表不显示模式填充图。从下面的代码中删除color:{}将显示图表。我尝试了几种方法来渲染图案填充柱状图:

https://www.npmjs.com/package/highcharts-pattern-fill

2. Highcharts docs中的SVG样式https://www.highcharts.com/docs/chart-design-and-style/pattern-fills

3. Highcharts PatternObject https://api.highcharts.com/class-reference/Highcharts.PatternObject

4. 不是使用导入，我已经尝试了{CDN这里....}使用Next.js Head

是否缺少代码或任何其他方式来显示模式填充?

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import patternFill from "highcharts-pattern-fill";
export default function Chart() {
if (typeof Highcharts === "object") {
patternFill(Highcharts);
}
const options = {
chart: {
type: "column",
},
title: {
text: "Column Chart with Stripped Bars",
},
series: [
{
name: "Apple",
data: [7, 6, 9, 14, 18, 21],
color: {
pattern: {
path: {
d: "M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2",
strokeWidth: 4,
},
width: 10,
height: 10,
opacity: 0.5,
},
},
},
],
};
return (
<>
<div>
<HighchartsReact highcharts={Highcharts} options={options} />
</div>
</>
);
}

Answer 1

对于那些正在为同样的问题而挣扎的人，有两件事需要解决:

1. import patternFill from "highcharts/modules/pattern-fill"

2. 在系列中使用plotOptions而不是pattern

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import patternFill from "highcharts/modules/pattern-fill";
export default function Chart() {
if (typeof Highcharts === "object") {
patternFill(Highcharts);
}
const options = {
chart: {
type: "column",
},
title: {
text: "Column Chart with Stripped Bars",
},
plotOptions: {
series: {
color: {
pattern: {
path: {
d: "M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11",
strokeWidth: 4,
},
width: 10,
height: 10,
opacity: 0.5,
},
},
},
},
series: [
{
name: "Apple",
data: [7, 6, 9, 14, 18, 21],
},
],
};
return (
<>
<div>
<HighchartsReact highcharts={Highcharts} options={options} />
</div>
</>
);
}