ハイチャートを使用して円グラフを作成していますが、チャートのカスタムカラーセットを読み込めません。
これが私のコードです：
<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>
私の円グラフはこのコードで機能しますが、デフォルトのカラーパレットのみを使用します。
カスタムカラーセットをどのように指定しますか？
すべての答え
次の例を見てくださいhttp://jsfiddle.net/8QufV/
構成で色を初期化することを好む人のために、次のように構成オブジェクトのplotOptions部分に色を配置することができます。
次のように、setOptionsの代わりにテーマを使用して色を設定する必要があると思います。
@Loko WebDesignの質問に答えるにはhttps://stackoverflow.com/a/38794379/7475250
カラードキュメントが利用可能ですここに。役に立ちますが、特定の色を変更すると実際に何が行われるかについては説明されていません。以下は私の最も良い説明です。
色の小道具は、チャートにループさせたい色をHighchartsに提供します。たとえば、次のカラープロップがあるとします。
あなたのパイスライスは青と緑の間で交互になります。青から赤に変更すると、色が赤と緑に切り替わります。以下でテストしてくださいフィドル
カラーリストを展開すると、繰り返す前に色の数が増えます。
データセットに4つ以上のスライスがある場合、色を繰り返します。
それぞれの「色」が何に対応するかを説明するウェブページはありますか？ここでのすべての答えは次のようなものを示しています。
しかし、＃333、＃CB2326などは実際に何が変わるのでしょうか。もちろん、それらを変更して何が変更されるかを確認することはできますが、このリファレンスをどこかで利用できるようにしておくと便利です。
私も同じ問題を抱えていました。 highcharts.cssには、「デフォルトの色」というセクションがあります。このセクションを削除した後、カスタムカラーを使用できるようになりました。とにかく、バージョンv5.0.4以降を使用している場合は、highcharts.cssは必要ないと思います。
Highcharts.Color（Highcharts.getOptions（）。colors [0]）。setOpacity（0.5）.get（ 'rgba'）]
高いチャートには、色が組み込まれています。したがって、color [0]または[1] ........ [6]のパスを変更する必要があります。
Leave a Reply