【问题标题】:How to set Highcharts object configuration globaly with vue-highcharts?如何使用 vue-highcharts 全局设置 Highcharts 对象配置?
【发布时间】:2018-11-28 11:39:27
【问题描述】:

我想知道是否有办法在 vue 应用程序中为 highcharts 全局设置图表选项。我使用以下插件安装:

import Vue from "vue";
import Highcharts from "highcharts";
import VueHighcharts from "vue-highcharts";
import addFunnelModule from "highcharts/modules/funnel";
import exporting from "highcharts/modules/exporting";
import offlineExporting from "highcharts/modules/offline-exporting";

exporting(Highcharts);
offlineExporting(Highcharts);
addFunnelModule(Highcharts);
Vue.use(VueHighcharts, { Highcharts });

我想设置导出图表的选项,以便它们适用于所有图表。

【问题讨论】:

    标签: vue.js highcharts vuejs2


    【解决方案1】:

    我想通了。为了实现这一点,您可以使用其中的 setOptions 函数,您可以传递所有要全局设置的属性

    import Vue from "vue";
    import Highcharts from "highcharts";
    import VueHighcharts from "vue-highcharts";
    import exporting from "highcharts/modules/exporting";
    import offlineexporting from "highcharts/modules/offline-exporting";
    
    exporting(Highcharts);
    offlineexporting(Highcharts);
    Highcharts.setOptions({
      credits: {
        text: "some test",
        href: "http://destinationlink",
        style: {
          color: "black",
        },
        position: {
          align: "right",
        },
      },
    });
    Vue.use(VueHighcharts, { Highcharts });
    
    

    有关选项的完整列表,请参阅 See docs

    【讨论】:

    • 您能否为您的解决方案发布代码示例?
    • @hitautodestruct 我已经更新了我的答案,包括示例代码
    猜你喜欢
    • 2018-08-17
    • 2021-02-20
    • 1970-01-01
    • 2019-10-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-09
    相关资源
    最近更新 更多