web-dev-qa-db-ja.com

HighCharts軸のタイトルを変更する

HighChartsチャートの軸のタイトルをプログラムで変更することは可能ですか？

私はこのようなことをやろうとしています：

charts.series[0].yAxis.title.text = 'new title';

または

charts.yAxis[0].title.text = 'new title';

（チャートの初期化時にすでにタイトルが設定されています）。

javascripthighcharts
25
Tomba

はい、次のようにしてこれを行うことができます。

chart.yAxis[0].axisTitle.attr({
        text: 'new title'
    });
30
escouser

これは、現在Axisを使用してsetTitleオブジェクトに対して直接実行できます。例えば：

chart.yAxis[0].setTitle({ text: "Bananas" });

このJSFiddleのデモ を参照してください。メソッドシグネチャは次のとおりです。

setTitle(Object title, [Boolean redraw])

したがって、オプションでブール値を渡して、再描画を待つことができます。 titleオブジェクトはxAxis.titleと同じパラメーターを受け取り、スタイルやその他のいくつかのオプション、およびテキスト自体を渡すことができます。 APIドキュメント に完全な情報があります。

24
Halvor Holsten Strand

上記のいずれかを機能させることができませんでした。おそらく昨年から状況が変わったようです...

chart.yAxis[0].update({
                title:{
                    text: "new title"
                }
            });

そしてそれはうまくいきました...

13
msanteler

上記の答えにはまだ1つの問題があります。エクスポートモジュールを使用してプロットから作成された画像には、変更されたタイトルではなく、元のタイトルが表示されます。修正する次の行を追加します。

chart.options.yAxis[0].title.text = 'new title';
6
Hauke

Y軸のタイトルを動的に変更するためのデモフィドルを作成しました。これを参照してください [〜＃〜] jsfiddle [〜＃〜]

HTML：

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<input type="button" value="Change Y-axis Title to 'My text'" id="my_btn">

JS（ボタンクリックでy軸のタイトルを更新するcコードの一部）：

var chart = $('#container').highcharts();
    $('#my_btn').click(function(){
        //alert('hey');
        chart.yAxis[0].update({
            title:{
                text:"My text"
            }
        });
        alert('Y-axis title changed to "My text" !');
    });

詳細については Highcharts 'update' function documentationを参照してください。

1
Rahul Gupta