ハイチャートのパイチャートの色を変更するにはどうしたらいいですか？

Question

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

 <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> 

私の円グラフは、このコードで動作しますが、それは唯一のデフォルトのカラーパレットを使用しています。

は、ここに私のコードです。

どのようにカスタムカラーセットを指定しますか？次のように私はあなたが何をする必要があるかと思います

Answer 1

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

http://jsfiddle.net/8QufV/

Answer 2

は代わりにはsetOptionsのテーマを使って色を設定します

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

Answer 3

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

Answer 4

次の例を見てWebページがあります「色」のそれぞれに対応するものは何ですか？

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

しかし、実際に何を変更するなど＃333、＃CB2326を、ない：すべての答えはここのようなものを示して？明らかに私はそれらを変更してどのような変更を見ることができますが、このリファレンスをどこかで利用できるようにするのは良いことです。

Answer 5

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

Answer 6

Highcharts.Color（Highcharts.getOptions（）。色[0]）。setOpacity（0.5）に.get（ 'RGBA'）]がハイチャート我々は作り付けの色で

。だからあなたは色のパスを変更する必要があります[0]または[1] ........ [6]コンフィグで色を初期化することを好むことあなたのそれらのために

Answer 7

、あなたは、単にそのようにconfigオブジェクトのは、plotoptions部分に色を入れることができます：@Loko Webデザインの質問に答えるために

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

Answer 8

https://stackoverflow.com/a/38794379/7475250

「色」のそれぞれに対応するWebページはありますか？ここでの答えは次のようなものです：

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

実際に＃333、＃CB2326などは実際に何が変わりますか？明らかに私はちょうど それらを変更し、どのような変更を参照することができますが、これを持っていいです 参照はどこかで利用可能です。

カラードキュメントはhereです。役に立つとはいえ、特定の色の変更が実際に何をしているのかは説明していません。以下は私の最善の説明です。

色の小道具は、チャートをループさせたい色をHighchartsに与えます。たとえば、次の色の小道具を持っていたとします。

colors: ['blue', 'green'] 

パイのスライスは青と緑で交互に表示されます。青と赤を交互に変えると、赤と緑の色が交互に変わります。次のようにテストしてください。fiddle

カラーリストを展開すると、繰り返し回数が増えます。

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

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