2017-12-27 19 views
0

私は現在、私のプロジェクトにはAngular 4を使用していますが、ngx-translate(i18n)を使用してユーザーが言語を切り替えることができます。これらはi18nフォルダに設定され、異なる言語のjsonファイルがあります。私はまた、多くのグラフに対してハイチャートを使用しています。また、APIをチェックアウトしたときに、言語にi18nも使用していることがわかりました。しかし、私がAPIドキュメントに集めることができるのは、HighChartsでsetOptionsを使用し、そこに翻訳語を指定する必要があるということですが、現在ngx-translateに使用しているjsonファイルを使用してこれを行うことができるかどうかは疑問でした?または、ユーザーが言語を切り替えることができる場合は、setOptionsを使用してどのようにする必要がありますか?ハイチャートlang with ngx-translate

答えて

0

このデモは、動的にsetOptionsを実行する方法を示しています。chart.redraw()はここでは必要であることをhttp://jsfiddle.net/kkulig/1qLqhtmd/

var chart = Highcharts.chart('container', { 

    series: [{ 
    data: [5.5656565, 20] 
    }] 
}); 


setTimeout(function(){ 
    Highcharts.setOptions({ 
    lang: { 
     decimalPoint: ' and after the dot is ' 
    } 
    }); 
    chart.redraw(); 
}, 3000); 

は注意してください。私たちがコメントアウトすると、小数点は3秒後にツールチップでのみ異なることになります(軸ラベルは変更されません)。

ここで最も簡単なアプローチは、ファイルから取り出したJSONをsetOptions(その引数もJSONであるため)にフォーマットし、上記の例に示すようにsetOptionsを使用する関数を作成することです。

+0

ありがとうございます、私は動的にsetOptionsを実行できました。しかし、タイトル、単一性、ラベルはsetOptionsで設定することはできません。なぜなら、グローバルで、1ページに複数のチャートがあるからです。これらのプロパティの言語を簡単に変更する方法はありますか? – spalm

+0

この**デモ**を参照してください:http://jsfiddle.net/kkulig/L6pr2dnu/既存のすべてのチャート(Highcharts.charts')に簡単にアクセスし、適用されたオプションをチェックし、関数を使用して既にChart.update()、 'Series.update()'、 'Chart.setTitle()' - これらの関数は** API **のこの部分で説明されています:https://api.highcharts .com/class-reference/classes.list) –

関連する問題