javascript - ハイチャートパイチャートの色を変更するにはどうすればよいですか?

Translate

ハイチャートを使用して円グラフを作成していますが、チャートのカスタムカラーセットを読み込めません。

これが私のコードです:

     <script type="text/javascript">
     $(function () {
     Highcharts.setOptions({
     colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
    });
    return new Highcharts.Chart({


        chart: {
            renderTo: 'trailpiechart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor: "#f8f8f8",
            margin: [20, 20, 20, 20]
        },


        credits: {
            enabled: false
        },

        title: {
            text: caption
        },
        tooltip: {
            formatter: function () {
                return this.y + ' links';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            layout: 'vertical',
            floating: false,
            borderRadius: 0,
            borderWidth: 0
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: data
        }]
    });
    });
</script>

私の円グラフはこのコードで機能しますが、デフォルトのカラーパレットのみを使用します。

カスタムカラーセットをどのように指定しますか?

This question and all comments follow the "Attribution Required."

すべての答え

Translate
Highcharts.setOptions({
 colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

次の例を見てくださいhttp://jsfiddle.net/8QufV/

ソース
Translate

構成で色を初期化することを好む人のために、次のように構成オブジェクトのplotOptions部分に色を配置することができます。

...,
plotOptions: {
  pie: {
   colors: [
     '#50B432', 
     '#ED561B', 
     '#DDDF00', 
     '#24CBE5', 
     '#64E572', 
     '#FF9655', 
     '#FFF263', 
     '#6AF9C4'
   ],
   allowPointSelect: true,
   cursor: 'pointer',
   dataLabels: {
     enabled: false
   },
   showInLegend: true
 }
},
...
ソース
Translate

次のように、setOptionsの代わりにテーマを使用して色を設定する必要があると思います。

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
ソース
Translate

@Loko WebDesignの質問に答えるにはhttps://stackoverflow.com/a/38794379/7475250

それぞれの「色」が何に対応するかを説明するウェブページはありますか?ここでのすべての答えは次のようなものを示しています。

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

しかし、#333、#CB2326などは実際に何が変わるのでしょうか。もちろん、それらを変更して何が変更されるかを確認することはできますが、このリファレンスをどこかで利用できるようにしておくと便利です。

カラードキュメントが利用可能ですここに。役に立ちますが、特定の色を変更すると実際に何が行われるかについては説明されていません。以下は私の最も良い説明です。

色の小道具は、チャートにループさせたい色をHighchartsに提供します。たとえば、次のカラープロップがあるとします。

colors: ['blue', 'green']

あなたのパイスライスは青と緑の間で交互になります。青から赤に変更すると、色が赤と緑に切り替わります。以下でテストしてくださいフィドル

カラーリストを展開すると、繰り返す前に色の数が増えます。

colors: ['blue', 'green', 'yellow']

データセットに4つ以上のスライスがある場合、色を繰り返します。

ソース
Translate
Highcharts.setOptions({
 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',      '#6AF9C4']
});
ソース
Translate

それぞれの「色」が何に対応するかを説明するウェブページはありますか?ここでのすべての答えは次のようなものを示しています。

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']

しかし、#333、#CB2326などは実際に何が変わるのでしょうか。もちろん、それらを変更して何が変更されるかを確認することはできますが、このリファレンスをどこかで利用できるようにしておくと便利です。

ソース
Translate

私も同じ問題を抱えていました。 highcharts.cssには、「デフォルトの色」というセクションがあります。このセクションを削除した後、カスタムカラーを使用できるようになりました。とにかく、バージョンv5.0.4以降を使用している場合は、highcharts.cssは必要ないと思います。

ソース
Translate

Highcharts.Color(Highcharts.getOptions()。colors [0])。setOpacity(0.5).get( 'rgba')]

高いチャートには、色が組み込まれています。したがって、color [0]または[1] ........ [6]のパスを変更する必要があります。

ソース
Leave a Reply
You must be logged in to post a answer.
著者について