英文:
Combine server side exporting and client side exporting in Highcharts (Vue)
问题
以下是翻译好的内容：
`client-side-exporting-chart.vue`
<template>
<div>
<chart :options="chartOptions" ref="chart" />
</div>
</template>
<script>
import Highcharts from "highcharts";
import { Chart } from "highcharts-vue";
import offlineExporting from "highcharts/modules/offline-exporting";
offlineExporting(Highcharts);
export default {
// ...
components:{
Chart
},
data(){
return {
chartOptions: {
// ...
exporting:{
// ...
fallbackToExportServer:false
}
}
}
}
}
</script>
`export-server-chart.vue`
<template>
<div>
<chart :options="chartOptions" ref="chart" />
</div>
</template>
<script>
import Highcharts from "highcharts";
import { Chart } from "highcharts-vue";
import exportingInit from "highcharts/modules/exporting";
exportingInit(Highcharts);
export default {
// ...
components:{
Chart
},
data(){
return {
chartOptions: {
// ...
exporting:{
// ...
fallbackToExportServer:true
}
}
}
}
}
</script>
请注意，代码部分没有进行翻译。
英文:
I was using Highcharts' export server to download charts as an image. I need to use the client-side(offline) exporting feature in a single chart due to the count of data points in the chart. After I use client-side exporting in just one chart, all of the charts turn into client-side exporting. How can I use both client-side exporting and Highcharts' export server in the same project?
Here is the relevant parts from the source code:
client-side-exporting-chart.vue
<template>
<div>
<chart :options="chartOptions" ref="chart" />
</div>
</template>
<script>
import Highcharts from "highcharts";
import { Chart } from "highcharts-vue";
import offlineExporting from "highcharts/modules/offline-exporting";
offlineExporting(Highcharts);
export default {
// ...
components:{
Chart
},
data(){
return {
chartOptions: {
// ...
exporting:{
// ...
fallbackToExportServer:false
}
}
}
}
}
</script>
export-server-chart.vue
<template>
<div>
<chart :options="chartOptions" ref="chart" />
</div>
</template>
<script>
import Highcharts from "highcharts";
import { Chart } from "highcharts-vue";
import exportingInit from "highcharts/modules/exporting";
exportingInit(Highcharts);
export default {
// ...
components:{
Chart
},
data(){
return {
chartOptions: {
// ...
exporting:{
// ...
fallbackToExportServer:true
}
}
}
}
}
</script>
答案1
得分: 1
模块在全局初始化，由于您的项目中只有一个Highcharts实例，每个组件都会自动启用离线导出。
在底层，该模块重新定义了menuItemDefinitions，并使用exportChartLocal方法代替exportChart方法。您可以通过添加以下配置来简单地恢复个别图表的行为：
exporting: {
menuItemDefinitions: {
downloadPNG: {
textKey: 'downloadPNG',
onclick: function() {
this.exportChart();
}
},
downloadJPEG: {
textKey: 'downloadJPEG',
onclick: function() {
this.exportChart({
type: 'image/jpeg'
});
}
},
downloadPDF: {
textKey: 'downloadPDF',
onclick: function() {
this.exportChart({
type: 'application/pdf'
});
}
},
downloadSVG: {
textKey: 'downloadSVG',
onclick: function() {
this.exportChart({
type: 'image/svg+xml'
});
}
}
}
}
在线演示: http://jsfiddle.net/BlackLabel/bgk5ftaj/
API 参考: https://api.highcharts.com/highcharts/exporting.menuItemDefinitions
英文:
Modules are initialized globally and since you have only one Highcharts instance in your project, offline-exporting is auto-enabled for each component.
Under the hood, the module redefines menuItemDefinitions and uses exportChartLocal instead of exportChart method. You can simply reverse back this behaviour for individual charts, by adding the below configuration:
exporting: {
menuItemDefinitions: {
downloadPNG: {
textKey: 'downloadPNG',
onclick: function() {
this.exportChart();
}
},
downloadJPEG: {
textKey: 'downloadJPEG',
onclick: function() {
this.exportChart({
type: 'image/jpeg'
});
}
},
downloadPDF: {
textKey: 'downloadPDF',
onclick: function() {
this.exportChart({
type: 'application/pdf'
});
}
},
downloadSVG: {
textKey: 'downloadSVG',
onclick: function() {
this.exportChart({
type: 'image/svg+xml'
});
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/bgk5ftaj/
API Reference: https://api.highcharts.com/highcharts/exporting.menuItemDefinitions
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论