Google Charts - 個々の棒の色を変更する

Question

Google Chartsの棒グラフでは、1つの棒の色を変更することは可能ですか？たとえば、私は2006年のデータを赤色にしたいと思っています（他のバーは青色です）。

function drawVisualization() { 
      // Create and populate the data table. 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Year'); 
      data.addColumn('number', 'Sales'); 

      data.addRows(4); 
      data.setValue(0, 0, '2004'); 
      data.setValue(0, 1, 1000); 

      data.setValue(1, 0, '2005'); 
      data.setValue(1, 1, 1170); 

    /* NEED TO MAKE THIS BAR RED? */ 
      data.setValue(2, 0, '2006'); 
      data.setValue(2, 1, 1400); 

      data.setValue(3, 0, '2007'); 
      data.setValue(3, 1, 1030); 


      chart = new google.visualization.BarChart(document.getElementById('visualization')); 
      chart.draw(data, {width: 400, height: 240, title: 'Company Performance', 
           vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
          }); 
} 

Answer 1

ここでは、色を変更するサンプルコードです。 "colors"オプションは、文字列の配列を受け入れることに注意してください。

var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, 
     colors: ['red','green'], 
     is3D:true 
}; 

Answer 2

いつも余分な列を挿入することができますので、異なる色になります。それは私が推測することができるすべてのことです。

のNaveenは、あなたがあなたのオプションに isStacked: trueを追加した場合しかし、それは互いの上にバーを描く代わりに、お互いの隣になり、それは別の色を使うようにするために、別の系列を追加する必要があります示唆したように

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Year'); 
      data.addColumn('number', 'Sales'); 
      data.addColumn('number', 'SalesMax'); 

      data.addRows(4); 
      data.setValue(0, 0, '2004'); 
      data.setValue(0, 1, 1000); 
      data.setValue(0, 2, 0); 

      data.setValue(1, 0, '2005'); 
      data.setValue(1, 1, 1170); 
      data.setValue(1, 2, 0); 

    /* NEED TO MAKE THIS BAR RED? */ 
      data.setValue(2, 0, '2006'); 
      data.setValue(2, 1, 0); 
      data.setValue(2, 2, 1400); 

      data.setValue(3, 0, '2007'); 
      data.setValue(3, 1, 1030); 
      data.setValue(3, 2, 0); 


      var chart = new google.visualization.BarChart(document.getElementById('visualization')); 
      chart.draw(data, {width: 400, height: 240, title: 'Company Performance', 
           vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, 
           series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}] 
          }); 
} 

Answer 3

とその幅や位置合わせが変わらないので見栄えが良いです。試してみてください：

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Year'); 
      data.addColumn('number', 'Sales'); 
      data.addColumn('number', 'SalesMax'); 

      data.addRows(4); 
      data.setValue(0, 0, '2004'); 
      data.setValue(0, 1, 1000); 
      data.setValue(0, 2, 0); 

      data.setValue(1, 0, '2005'); 
      data.setValue(1, 1, 1170); 
      data.setValue(1, 2, 0); 

    /* NEED TO MAKE THIS BAR RED? */ 
      data.setValue(2, 0, '2006'); 
      data.setValue(2, 1, 0); 
      data.setValue(2, 2, 1400); 

      data.setValue(3, 0, '2007'); 
      data.setValue(3, 1, 1030); 
      data.setValue(3, 2, 0); 


      var chart = new google.visualization.BarChart(document.getElementById('visualization')); 
    chart.draw(data, {isStacked: true, width: 400, height: 240, title: 'Company Performance', 
           vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, 
           series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}] 
          }); 
} ​ 

Answer 4

一連のネストされたオブジェクト

オブジェクトのアレイ、各グラフにおける対応する一連のフォーマットを説明するとオブジェクトの配列、またはオブジェクト。シリーズのデフォルト値を使用するには、空のオブジェクト{}を指定します。系列または値が指定されていない場合は、グローバル値が使用されます。各オブジェクトは、次のプロパティをサポートしています。

色 - このシリーズで使用する色です。有効なHTMLカラー文字列を指定してください。 targetAxisIndex - このシリーズを割り当てる軸。0はデフォルトの軸、1は反対の軸です。デフォルト値は0です。異なる軸が異なる軸に対してレンダリングされるグラフを定義するには1に設定します。少なくとも1つのシリーズは、デフォルトの軸に多く割り当てられます。軸ごとに異なるスケールを定義することができます。

visibleInLegend - 真は、系列が凡例を持つべきであることを意味し、偽は、凡例が存在しないことを意味する。デフォルトはtrueです。 与えられた順序でシリーズに適用されるオブジェクトの配列を指定することも、各子に適用するシリーズを示す数値キーを持つオブジェクトを指定することもできます。たとえば、次の2つの宣言は同一であり、凡例から黒および凡例は存在しない、および赤などの第四及び不在のように、第1の一連の宣言：

series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}} 

Answer 5

がhttps://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

ことができます参照してください{ロール： 'スタイル'}をデータテーブルに追加します。同じ色を使用するすべての列に対して、空のスタイル ''を指定するだけです。私はチャートのために今のロールスタイルの技術を使用してこの問題を解決するなど、

// example from Google 
var data = google.visualization.arrayToDataTable([ 
    ['Element', 'Density', { role: 'style' }], 
    ['Copper', 8.94, '#b87333'],   // RGB value 
    ['Silver', 10.49, 'silver'],   // English color name 
    ['Gold', 19.30, 'gold'], 
    ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration 
]); 

Answer 6

：次に、あなたが赤になりたい列に、あなただけの「赤」や「＃FF0000の」または「赤い色」を指定することができます動的なデータを生成するランダムな関数を使って色を生成する

function random_color_part() { 
return str_pad(dechex(mt_rand(0, 255)), 2, '0', STR_PAD_LEFT); 
} 

function random_color() { 
return random_color_part() . random_color_part() . random_color_part(); 
} 
then simply 
$color=random_color(); 
print "['$rows[1]',$rows[2],'#$color'],\n";