时间戳

首页 > 解决方案 > Vue2-Highcharts setOptions 语言

vue.js - Vue2-Highcharts setOptions 语言

问题描述

我正在尝试使用 Vue2 对 highcharts 进行标准翻译，但我遇到了困难，因为我无法访问 setOptions 选项。我没有找到太多关于 Highcharts 的 vue2 文档，所以我在使用它时遇到了一些困难，如果有人也可以向我提供该内容，谢谢。

import VueHighcharts from 'vue2-highcharts'
export default{
    components: {
        VueHighcharts
    },
    props: ['title', 'subtitle', 'initoptions'],
    data(){
        let initOptions = JSON.parse(this.initoptions);
        let tmpSeries = [];
        let count = 0;

        $.each(initOptions, function(key, value) {
            let data = [];
            $.each(value, function(key2, value2){
                let date = key2.split('-');
                data.push([Date.UTC(date[2], date[1], date[0]), value2]);
            });

            tmpSeries.push({'name': key, 'data': data});
            count++;
        });

        return{
            options: {
                /* ***
                  I can not set this setOptions property to lang
                *** */
                lang: {
                    loading: 'Aguarde...',
                    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                    weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
                    shortMonths: ['Jan', 'Feb', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                    exportButtonTitle: "Exportar",
                    printButtonTitle: "Imprimir",
                    rangeSelectorFrom: "De",
                    rangeSelectorTo: "Até",
                    rangeSelectorZoom: "Periodo",
                    downloadPNG: 'Download imagem PNG',
                    downloadJPEG: 'Download imagem JPEG',
                    downloadPDF: 'Download documento PDF',
                    downloadSVG: 'Download imagem SVG'
                },
                chart: {
                    type: 'spline'
                },
                title: {
                    text: this.title || ''
                },
                subtitle: {
                    text: this.subtitle || ''
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        day:'%e/%m',
                        week:'%e/%m',
                        month: '%m/%y',
                        year: '%m'
                    },
                    title: {
                        text: 'Date'
                    }
                },
                yAxis: {
                    title: {
                        text: 'Total'
                    },
                    labels: {
                        formatter: function () {
                            return this.value;
                        }
                    }
                },
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    spline: {
                        marker: {
                            radius: 8,
                            lineColor: '#666666',
                            lineWidth: 1
                        }
                    }
                },
                series: tmpSeries
            }
        }
    }
}

我希望有人可以帮助我，谢谢。

标签： vue.jshighchartsvuejs2vue2-highcharts

解决方案

我不确定这个包，但使用官方 Vue Highcharts你可以设置这样的选项：

import Highcharts from 'highcharts';

import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);

Highcharts.setOptions({
    lang: {
        decimalPoint: '.',
        drillUpText: 'Back',
        noData: "Check your options please",
        resetZoom: 'Reset',
        thousandsSep: ' '
    }
});

import HighchartsVue from 'highcharts-vue';
Vue.use(HighchartsVue);

推荐阅读