web-dev-qa-db-ja.com

ハイチャート円グラフの色を変更するにはどうすればよいですか？

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

ここに私のコードがあります：

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

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

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

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

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

79
Ricardo Alvaro Lohmann

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

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

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

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

@Loko Web Designの質問に答えるには https://stackoverflow.com/a/38794379/747525

各「色」が何に対応するかを示すWebページはありますか？ここのすべての答えは、次のようなものを示しています。

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

しかし、＃333、＃CB2326などは実際に何を変更しますか？明らかに、それらを変更して変更内容を確認することはできますが、このリファレンスをどこかで利用できるようにしたいです。

カラードキュメントが利用可能です こちら 。有用ではありますが、特定の色を変更すると実際に何が起こるかについては説明しません。以下は私の最高の説明です。

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

colors: ['blue', 'green']

円グラフのスライスは青と緑が交互に表示されます。青色を赤色に変えると、赤色と緑色が交互に変わります。次の fiddle でテストします

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

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

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

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

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

1
bugovicsb

各「色」が何に対応するかを示すWebページはありますか？ここのすべての答えは、次のようなものを示しています。

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

しかし、＃333、＃CB2326などは実際に何を変更しますか？明らかに、それらを変更して変更内容を確認することはできますが、このリファレンスをどこかで利用できるようにしたいです。

1
Loko Web Design

Highcharts.Color（Highcharts.getOptions（）。colors [0]）。setOpacity（0.5）.get（ 'rgba'）]

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

0
Kondal