search

highcharts / highcharts-vue

Other
686 stars 150 forks source link

localization #71

Closed valeriy-efimov closed 5 years ago

valeriy-efimov commented 5 years ago

how to add localization ? my try

<highcharts :options="stockOptions" :constructor-type="'stockChart'" :lang="lang"></highcharts>
        </div>

data: function () {
            return {
lang: {
            decimalPoint: ',',
            thousandsSep: '.',
            loading: 'Daten werden geladen...',
            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
            shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            exportButtonTitle: "Exportieren",
            printButtonTitle: "Drucken",
            rangeSelectorFrom: "Von",
            rangeSelectorTo: "Bis",
            rangeSelectorZoom: "Zeitraum",
            downloadPNG: 'Download als PNG-Bild',
            downloadJPEG: 'Download als JPEG-Bild',
            downloadPDF: 'Download als PDF-Dokument',
            downloadSVG: 'Download als SVG-Bild',
            resetZoom: "Zoom zurücksetzen",
            resetZoomTitle: "Zoom zurücksetzen"             
        }  
...

and

` stockOptions: {
lang: {
            decimalPoint: ',',
            thousandsSep: '.',
            loading: 'Daten werden geladen...',
            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
            weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
            shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
            exportButtonTitle: "Exportieren",
            printButtonTitle: "Drucken",
            rangeSelectorFrom: "Von",
            rangeSelectorTo: "Bis",
            rangeSelectorZoom: "Zeitraum",
            downloadPNG: 'Download als PNG-Bild',
            downloadJPEG: 'Download als JPEG-Bild',
            downloadPDF: 'Download als PDF-Dokument',
            downloadSVG: 'Download als SVG-Bild',
            resetZoom: "Zoom zurücksetzen",
            resetZoomTitle: "Zoom zurücksetzen"             
        }  
`

None of the options worked.

Denyllon commented 5 years ago

Hi @valeriy-efimov ,

Thank you for contacting us. Both ways of setting lang options are not allowed by API documentation of wrapper and native Highcharts. As documenation says, "The language object is global and it can't be set on each chart initialization.", so in order to set it correctly, please use Highcharts.setOptions function with lang object passed as the argument, before any of charts will be created. I prepared the example which shows how it should be done, so please refer to it.

import exporting from "highcharts/modules/exporting";
import Highcharts from "highcharts";
import HighchartsVue from "highcharts-vue";

exporting(Highcharts);

Highcharts.setOptions({
  lang: {
    decimalPoint: ",",
    printChart: "Drucken",
    downloadPNG: "Download als PNG-Bild",
    downloadJPEG: "Download als JPEG-Bild",
    downloadPDF: "Download als PDF-Dokument",
    downloadSVG: "Download als SVG-Bild"
  }
});

Live example:https://codesandbox.io/s/64mjl6w59k

Kind regards!

valeriy-efimov commented 5 years ago

@Denyllon Thank you very much