- 确认Highchart版本是否与Angular版本兼容,如果不兼容,则需要升级或降级Highchart版本。
- 如果Highchart依然无法在Firefox上显示,可以尝试在Angular组件中添加一些样式来调整Highchart图表的大小和位置,例如:
:host {
display: block;
height: 400px; // 调整高度
width: 100%; // 调整宽度
position: relative; // 确保图表位置正确
}
- 如果以上方法都无效,可以尝试在组件中加入以下代码,强制Highchart使用 SVG 渲染器:
import Highcharts from 'highcharts';
import highchartsMore from 'highcharts/highcharts-more';
highchartsMore(Highcharts);
import exporters from 'highcharts/modules/exporting';
exporters(Highcharts);
Highcharts.SVGRenderer.prototype.Element.prototype.strokeWidth = function () {
var val = Highcharts.getStyle(this.element, 'stroke-width');
if (val.indexOf('px') > -1) {
val = parseFloat(val);
} else {
val = parseFloat(val) * this.renderer.width;
}
return val;
};
// 添加以下代码
if (typeof Highcharts !== 'undefined') {
Highcharts.setOptions({
chart: {
styledMode: true,
width: null,
height: null
},
plotOptions: {
series: {
states: {
inactive: {
opacity: 1
}
}
}
},
exporting: {
allowHTML: true
},
credits: {
enabled: false
},
legend: {
enabled: false
}
});
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Heatmap'
},
xAxis: {
categories: ['Category1', 'Category2', 'Category3