4

1つのグラフですべてのシリーズに同じ色を設定するにはどうすればよいですか？チャートには膨大な数のシリーズがあり、各シリーズの色を個別に設定するのは不便な場合があります。

チャートのすべてのシリーズに色を付けたいとしましょう。毎回明示的にに設定するred必要なしに、これを行うにはどうすればよいですか？series.colorred

4

2 に答える 2

5

各チャートの色オプションを設定することで、ジェレミーが述べたようにそれを行うことができます。または、次のようにデフォルトのカラー配列をオーバーライドできます

Highcharts.setOptions({
    colors:['red','green','blue']
});

このアプローチの利点は、チャートを作成する前に、これを1回呼び出すだけでよいことです。そして、この後のすべてのチャートは、各チャートでこのオプションを設定する必要なしに、これらの色を使用します。ほとんどのWebサイトにはcommon.jsまたは同様のjavascriptファイルがあり、これらは通常、他のカスタムスクリプトの前に読み込まれます。このコードをそのファイルに追加するだけで、その後の色を忘れることができます。

更新
同じチャート内のすべてのシリーズを単一の色にしたいので、colors配列を完全にオーバーライドして、1つの色だけにすることができます

Highcharts.getOptions().colors = ['red'];

この方法では、ナビゲーター（Highstockの下部にある青いミニグラフ）はデフォルトの青色のままになります。これは、オプションとは異なる方法でオーバーライドする必要があります。

PS上記の方法は、デフォルトオプションをオーバーライドするための推奨される方法ではありません。正しい方法は実行することですsetOptions()が、既存のデフォルトとのマージが発生するため、配列サイズは1より大きくなります。

または、次のようにgetColorメソッドをオーバーライドするだけで、常に選択した色を返すことができます。ここでも、チャートのコンストラクターを呼び出す前にこれを行う必要があります

Highcharts.Series.prototype.getColor=function(){
    this.color= '#f00';
}

デフォルトの色の設定@jsFiddle

于 2013-02-24T07:01:41.720 に答える
1

16進色の配列を定義してから、その配列をチャート宣言で使用できます。チャートオブジェクトのすべてのシリーズは、この色の配列から取得されます。

複数のチャート宣言がある場合は、同じ配列を使用できます。

これがHighchartsサンプルの1つで、カスタムカラーの配列が追加されています（jsfiddleで実行）。

$(function () {
    var myColors = [
        '#ff0000',
        '#ff6600',
        '#ffcc00'
    ];
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            colors: myColors,
            title: {
                text: 'Stacked bar chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                }
            },
            legend: {
                backgroundColor: '#FFFFFF',
                reversed: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.series.name +': '+ this.y +'';
                }
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
                series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        });
    });

});

お役に立てれば！

于 2013-02-24T05:05:32.073 に答える