50

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

これが私のコードです：

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

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

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

4

8 に答える 8

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

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

于 2012-04-09T14:30:05.550 に答える
13

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

...,
plotOptions: {
  pie: {
   colors: [
     '#50B432', 
     '#ED561B', 
     '#DDDF00', 
     '#24CBE5', 
     '#64E572', 
     '#FF9655', 
     '#FFF263', 
     '#6AF9C4'
   ],
   allowPointSelect: true,
   cursor: 'pointer',
   dataLabels: {
     enabled: false
   },
   showInLegend: true
 }
},
...
于 2017-05-01T00:00:43.337 に答える
7

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

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
                             '#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
于 2012-04-04T13:35:22.653 に答える
1

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

于 2016-11-25T11:23:55.060 に答える
1 
Highcharts.setOptions({
 colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',      '#6AF9C4']
});
于 2013-07-30T18:12:01.043 に答える
1

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

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

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

于 2016-08-05T16:59:21.637 に答える