我目前正在合并Highcharts在我的Next.js项目柱状图,但我的图表不显示模式填充图。从下面的代码中删除color:{}将显示图表。我尝试了几种方法来渲染图案填充柱状图:
https://www.npmjs.com/package/highcharts-pattern-fillHighcharts docs中的SVG样式https://www.highcharts.com/docs/chart-design-and-style/pattern-fills
Highcharts PatternObject https://api.highcharts.com/class-reference/Highcharts.PatternObject
- 不是使用导入,我已经尝试了{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>
</>
);
}
对于那些正在为同样的问题而挣扎的人,有两件事需要解决:
-
import patternFill from "highcharts/modules/pattern-fill"
-
在系列中使用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>
</>
);
}