web-dev-qa-db-ja.com

y軸のHighchartsテキストラベル

Highchartsを使用していて、単純な縦棒グラフを表示したいのですが、y軸に数値を使用する代わりに、テキスト値を使用したいと思います。
たとえば、代わりに[0,5,10,15,20]使用したい[Very Low,Low,Medium,High,Very High]。

プロットバンドを使用してこれを行うことが多少可能であることに気づきましたが、それでも数値のy軸ラベルが表示され、その横にテキストが配置されています。テキストラベルのみを表示します。

javascripthighcharts
25
Wesley Tansey

label formatter を使用してラベルを変更できます。データが適切に形成されていると仮定すると、次のようなことができます。

var yourLabels = ["Very Low", "Low", "Medium", "High", "Very High"];
var yourChart = new Highcharts.Chart({
    //...
    yAxis: {        
        labels: {
            formatter: function() {
                return yourLabels[this.value];
            }
        }
    }
    //...
});
46
NT3RP

次のように、変更する値を切り替えるために使用するオブジェクトを宣言します。

var change = {
    0: 'Very Low',
    5: 'Low',
    10: 'Medium',
    15: 'High',
    20: 'Very High'
};

次に、グラフオプションでラベルフォーマッターを使用して切り替えます。

yAxis: {
    labels: {
        formatter: function() {
            var value = change[this.value];
            return value !== 'undefined' ? value : this.value;
        }
    }
}
12
Ricardo Alvaro Lohmann