javascript - ハイチャート - 1 つの x 軸ラベルのみの色を変更する

Question

ここで説明されているように、Highchart で x 軸ラベルの色を変更する方法を知っています。

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-style/

しかし、すべてのラベルではなく、1 つのラベルだけの色を変更したい場合はどうすればよいでしょうか? 個々のラベルにスタイルを適用するにはどうすればよいですか?

Answer 1

label-formatter を使用してスタイルを設定することもできます。jsfiddle の完全な例:

labels: {
    formatter: function () {
        if ('Jun' === this.value) {
            return '<span style="fill: red;">' + this.value + '</span>';
        } else {
            return this.value;
        }
    }
}

Answer 2

x 軸内の特定のアイテムの色を変更したいということでした。

APIを見ましたが、簡単な方法が見つかりませんでした。

「チャート準備完了イベント」のコールバックを設定できるため:

チャート (オブジェクト オプション、関数コールバック) :

パラメーター

options: Object 左メニューの「オプション オブジェクト」という見出しの下に記載されているチャート オプション。

コールバック: 関数

チャート オブジェクトの読み込みとレンダリングが終了したときに実行する関数。ほとんどの場合、グラフは 1 つのスレッドで作成されますが、Internet Explorer バージョン 8 以下では、ドキュメントの準備が整う前にグラフが開始されることがあります。このような場合、new Highcharts.Chart() を呼び出した直後にグラフ オブジェクトが終了することはありません。 . 結果として、新しく作成された Chart オブジェクトに依存するコードは、常にコールバックで実行する必要があります。chart.event.load ハンドラーを定義することは同等です。

戻り値: 作成された Chart オブジェクトへの参照。

あなたは汚い方法でそれを行うことができます:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            marginBottom: 80
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            labels: {

                style: {
                    color: 'red'
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    },
    function(c){

        // this relies in that te xAxis is before the yAxis
        // also, setting the color with color: #ABCDEA didn't work
        // you have to use fill.
        $(".highcharts-axis:first text").each(function(i, label){
            var $label = $(label);
            if($label.children().text() === "Jun") {
                $label.css({fill: "blue"});                        

            }

        });

        // You also can to something like:
        $(".highcharts-axis:first text:eq(6)").css({fill: "green"});

    })
});​

これがお役に立てば幸いです

Answer 3

ドーナツ円グラフで dataLabels を使用しています。値を比較する条件付きロジックに基づいて、個々のパイ スライスのラベル テキストの色を変更したいと考えました。

検索でここにたどり着いたので、共有するだけです。

data: outerData,
dataLabels: {
    formatter:
        function () {
            if ((outerData[this.point.x].y > innerData[this.point.x].y) && (this.point.x != 0)) {
                return this.y > 0.1 ? '<span style="fill: red;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
            } else {
                return this.y > 0.1 ? '<span style="fill: #006400;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
           }
        }
    }