29

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'}}
                             });
}
4

9 に答える 9

37

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

var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
      colors: ['red','green'],
      is3D:true
};
于 2012-08-09T07:00:53.060 に答える
28

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
]);
于 2014-07-05T15:12:13.700 に答える
6

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}]
                             });
} ​
于 2012-05-31T15:24:23.940 に答える
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, {width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                              series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
                             });
}
于 2012-05-15T01:08:44.343 に答える
1

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

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

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

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

series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}
于 2013-08-19T03:00:47.833 に答える
1

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

    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";
于 2017-04-04T13:29:04.220 に答える