web-dev-qa-db-ja.com

Google Chart-個々のバーの色を変更する

Google Chartの棒グラフを使用すると、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'}}
                             });
}
chartsgoogle-visualization
24
FattyPotatoes

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

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

https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors を参照してください

データテーブルに{role： 'style'}を追加できます。同じ色にしたいすべての列に対して、空のスタイル ''を指定するだけです。次に、赤にしたい列で、「red」、「＃ff0000」、または「color：red」などを指定できます。

// 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
]);
24
Josh Lopez

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, {isStacked: true, width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                              series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
                             });
} ​
6
Synchro

常に余分な列を挿入できるため、色が異なります。それがすべてできると思います。

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}]
                             });
}
3
naveen

seriesオブジェクトの配列、またはネストされたオブジェクトを持つオブジェクト

オブジェクトの配列。それぞれがチャート内の対応するシリーズの形式を記述します。シリーズのデフォルト値を使用するには、空のオブジェクト{}を指定します。シリーズまたは値が指定されていない場合、グローバル値が使用されます。各オブジェクトは次のプロパティをサポートしています。

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

visibleInLegend-ブール値。trueはシリーズに凡例エントリが必要であることを意味し、falseは必要ないことを意味します。デフォルトはtrueです。オブジェクトの配列を指定できます。各オブジェクトは、指定された順序でシリーズに適用されるか、各子が適用するシリーズを示す数値キーを持つオブジェクトを指定できます。たとえば、次の2つの宣言は同一であり、最初のシリーズを凡例に黒で不在、4つ目を凡例に赤で不在として宣言しています。

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

動的データを生成するチャートのロールスタイルテクニックを使用してこの問題を解決しました。ランダム関数を使用して色を生成しました。

    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";
1
user3226750

上記のヒントの例を次に示します

google.charts.load('current', { packages: ['corechart', 'bar'] })
google.charts.setOnLoadCallback(drawStacked)

function mt_Rand (min, max) {
  var argc = arguments.length
  if (argc === 0) {
    min = 0
    max = 2147483647
  } else if (argc === 1) {
    throw new Error('Warning: mt_Rand() expects exactly 2 parameters, 1 given')
  }
  return Math.floor(Math.random() * (max - min + 1)) + min
}

function dechex (d) {
  var hex = Number(d).toString(16)
  hex = '000000'.substr(0, 6 - hex.length) + hex
  return hex
}

function str_pad (str) {
  str += ''
  while (str.length < 3) {
    str = str + str
  }
  return str
}

function random_color_part () {
  // return str_pad( dechex( mt_Rand( 0, 255 ) ), 2, '0', 1);
  return mt_Rand(0, 255)
}

function random_color () {
  return 'rgb(' + random_color_part() + ',' + random_color_part() + ',' + random_color_part() + ')'
}

let $color = random_color()
// alert($color);

function drawStacked () {
  // var data = new google.visualization.DataTable();

  var data = google.visualization.arrayToDataTable([
    ['Element', 'Density', { role: 'style' }],
    ['cor-glenio-aleatoria', 8.94, random_color()], // RGB value
    ['cor-arlei-aleatoria', 10.49, random_color()], // English color name
    ['outra cor', 19.30, random_color()],

    ['outra cor fixa', 21.45, 'color: #e5e4e2' ] // CSS-style declaration
  ])

  var options = {
    title: 'Motivation and Energy Level Throughout the Day',
    isStacked: true,
    hAxis: {
      title: 'Time of Day',
      format: 'h:mm a',
      viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }
    },
    vAxis: {
      title: 'Rating (scale of 1-10)'
    }
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'))
  chart.draw(data, options)
}

https://jsfiddle.net/zeh3pn6d/2
0
Arlei F. Farnetani Junior

他の誰かが私と同じ問題に遭遇した場合に備えて、これをここに残してください：

バーチャート内の特定のバーの色を変更できないという同様の問題がありました。ドキュメントが述べたように、私はここで答えをいくつか試しましたが、何もうまくいきませんでした。

判明したのは、変更するだけでしたgoogle.charts.Barからgoogle.visualization.ColumnChart。

0
Groom