web-dev-qa-db-ja.com

ハイチャート縦棒グラフ内の各カテゴリの色をどのように変更しますか？

私は、それぞれが単一のデータポイントを持つ複数のカテゴリを持つ縦棒グラフを持っています（例： like this one ）。各カテゴリのバーの色を変更することは可能ですか？つまり、各バーはすべて青色ではなく、独自の色を持っていますか？

highcharts
67
James Hollingworth

データ配列を数値ではなく構成オブジェクトに変更する場合、各ポイント/バーの色を個別に設定することもできます。

data: [
      {y: 34.4, color: 'red'},     // this point is red
      21.8,                        // default blue
      {y: 20.1, color: '#aaff99'}, // this will be greenish
      20]                          // default blue

jsfiddleの例

enter image description here

100
eolsson

オプションを設定することもできます：

  {plotOptions: {column: {colorByPoint: true}}}

詳細については、 docs を参照してください

58
antonversal

colorsにしたい色を追加し、colorByPointをtrueに設定します。

colors: [
'#4572A7', 
'#AA4643', 
'#89A54E', 
'#80699B', 
'#3D96AE', 
'#DB843D', 
'#92A8CD', 
'#A47D7C', 
'#B5CA92'
],

plotOptions: {
    column: {
        colorByPoint: true
    }
}

demo

参照：

25
Ricardo Alvaro Lohmann

はい、jsfiddleの例を次に示します。 http://jsfiddle.net/bfQeJ/

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

例は円グラフですが、心のコンテンツに合わせてすべての色でシリーズを塗りつぶすことができます=）

13
Allen Liu

グラフの色を変更するために、高チャートグラフに色配列を追加できます。これらの色を並べ替えたり、独自の色を指定することもできます。

$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
7
Prem Kumar Maurya

Antonversalで述べたように、チャートオブジェクトの作成時に色を読み取り、色オプションを使用することができます。

var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});
4
thirumalaa srinivas

これを追加するだけです...または、必要に応じて色を変更できます。

Highcharts.setOptions({
        colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        plotOptions: {
            column: {
                colorByPoint: true
            }
        }

    });
1
V.Ahlawat

ただチャートを置く

$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
        type: 'column'
}, .... Continue chart
1
pradip kor

プロパティを追加します。

 colors: ['Red', 'Bule', 'Yellow']
0
Tran Anh Hien

これは私のために働いた。特に動的な場合、シリーズのすべての色オプションを設定するのは面倒です

plotOptions: {
  column: {
   colorByPoint: true
  }
}
0
Leo Rams