highcharts - “viewFullscreen”菜单项未显示在 highcharts 6.2.0 的上下文菜单中
问题描述
我有一个当前显示在 bootstrap 4 卡中的 highchart 折线图。我希望它全屏显示,我目前知道 highchart 6.2.0 具有启用导出文件的选项,以便我可以使用导出上下文菜单。所以,我启用了它们,但导出上下文菜单中没有显示“showFullscreen”选项。
我导入了 highchart 并将模块导出到组件。在文档 highchart 中,家伙说我必须将 viewFullscreen 作为字符串包含到 menuItems 数组中。我也这样做了。但没有任何工作。
import { chart } from 'highcharts';
import * as Highcharts from 'highcharts/highcharts';
import * as HighchartsMore from 'highcharts/highcharts-more';
import * as HighchartsSolidGauge from 'highcharts/modules/solid-gauge';
import * as HighChartExport from 'highcharts/modules/exporting';
HighchartsMore(Highcharts);
HighchartsSolidGauge(Highcharts);
HighChartExport(Highcharts);
@Component({
selector: 'app-line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit, OnChanges {
@ViewChild('chartTarget') chartTarget: ElementRef;
@Input() data;
@Input() lineColor;
options: any;
chart: Highcharts.ChartObject;
constructor() { }
ngOnInit() {
this.drawLineChart();
}
ngOnChanges(changes: SimpleChanges) {
if (this.chart && changes['data']) {
this.drawLineChart();
}
}
drawLineChart() {
this.options = {
chart: {
scrollablePlotArea: {
minWidth: 700
},
height: 230,
zoomType: 'x'
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
/*tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,*/
labels: {
align: 'left',
x: 3,
y: -3,
enabled: false
}
},
yAxis: [{ // left y axis
title: {
text: null
},
padding: 3,
showFirstLabel: false,
gridLineWidth: 1,
/*labels: {
align: 'left',
x: -10
}*/
}],
colors: this.lineColor,
legend: {
align: 'left',
verticalAlign: 'bottom',
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true,
headerFormat: ''
},
exporting: {
enabled: true,
menuItemDefinitions: {
// Custom definition
},
buttons: {
contextButton: {
menuItems: ['viewFullscreen']
}
}
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
enabled: false
}
}
},
series: this.data
};
this.chart = chart(this.chartTarget.nativeElement, this.options as any);
}
}
但是当我点击那个汉堡包图标时,除了“viewFullscreen”选项之外的所有其他选项都不起作用。
解决方案
要将自定义按钮添加到上下文菜单,您必须将其添加到exporting.menuItemDefinitions
数组exporting.buttons.contextButton.menuItems
中。请注意,全屏需要加载一个额外的模块:modules/full-screen。
代码:
Highcharts.chart('container', {
exporting: {
menuItemDefinitions: {
fullscreen: {
onclick: function() {
Highcharts.FullScreen.prototype.init(this.renderTo);
},
text: 'Full screen'
}
},
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'fullscreen']
}
}
},
series: [{
data: [
43934,
52503,
57177,
69658,
97031,
119931,
137133,
154175
]
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>
<div id="container"></div>
演示:
角度演示:
API参考:
推荐阅读
- java - @SpringBootApplication 和 @ComponentScan 不能一起工作(bean 配置)
- javascript - 淡入或淡出取决于活动课程,淡入作品,淡出不
- python - Python 等效于 c++ find_if
- c# - 如何开始编写 C# 客户端以将文件上传到 WeTransfer?
- node.js - Web3.js sendSignedTransaction 给出“错误:无法检查交易收据”
- apache-kafka - kafka 中到不同主题的多个连接器将连接到同一个节点
- javascript - Javascript用方括号替换字符串点表示法
- schema.org - PerformanceRole 条目的 Schema.org Character 的 URL
- jenkins - Jenkins 和本地 PyCharm 使用不同的路径运行测试
- c# - C#:将作为类名的字符串转换为 T