web-dev-qa-db-ja.com

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

したがって、ここで説明するHighchartでx軸ラベルの色を変更する方法を知っています。

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

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

javascripthighcharts
16
ericbae

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

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

enter image description here

36
eolsson

X軸内の特定のアイテムの色を変更したいのですが。

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

「チャートレディイベント」のコールバックを設定できるため、次のようになります。

チャート（オブジェクトオプション、関数コールバック）：

パラメーター

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

コールバック：関数

チャートオブジェクトの読み込みとレンダリングが終了したときに実行する関数。ほとんどの場合、グラフは1つのスレッドで作成されますが、Internet Explorerバージョン8以下では、ドキュメントの準備が整う前にグラフが開始されることがあります。このような場合、新しい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"});

    })
});​

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

4
Chris

Exporting.highcharts.comのhighchartsエクスポートサーバーを使用してグラフの画像をレンダリングする場合、JavaScriptフォーマッターは実行されないことに注意してください。

幸いなことに、個々のラベルとタイトルの文字列のハイチャート いくつかのhtmlタグとスタイル属性を変換します は同等のSVGスタイルになりますが、htmlの解析方法についてはかなり気難しいです。一重引用符で囲まれた属性を使用しているタグは削除されます。二重引用符を使用する必要があります。また、別のタグ内に<br/>タグをネストしても機能しません。

したがって、たとえば2行のテキストを赤で表示したい場合は、次のようになります。

<span style="color: #ff0000">First line</span> <br/> 
<span style="color: #ff0000">Second line</span>
2
Jorn van de Beek
 xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        labels: {
            formatter: function () {
                if ('Jan' === this.value) {
                    return '<span style="fill: blue;">' + this.value + '</span>';
                } else {
                    return this.value;
                }
            }
        }
    },
1
Kondal

ドーナツ円グラフで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;
           }
        }
    }
1
Spencer Sullivan