web-dev-qa-db-ja.com

Googleチャート、棒ごとに異なる色

次のGoogle棒グラフがあります。

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '');
    data.addColumn('number', '');
    data.addRows(2);
    data.setValue(0, 0, 'Value 1');
    data.setValue(0, 1, 250);
    data.setValue(1, 0, 'Value 2');
    data.setValue(1, 1, 100);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, {
        width: 400, 
        height: 175, 
        title: 'Total',
        legend: 'none',
    });
  }

すべて正常に実行されますが、問題は、両方のバーが同じ色であり、バーごとに異なる色を使用できるようにしたいことです。

誰かがこれを手伝ってくれる？

javascriptchartsgoogle-visualization
15
jaclerigo

物事を行うためのハッキーな方法の1つは、それらをすべて同じ行に配置することで、APIはこれに異なる色を割り当てます。したがって、あなたの例では

function drawChart(){

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Value 1');
    data.addColumn('number', 'Value 2');
    data.addRows(2);
    data.setValue(0, 0, 250);
    data.setValue(0, 1, 100);

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));

    chart.draw(data, {
        width: 600, 
        height: 175, 
        title: 'Total',
        legend: 'none',
    });
}

独自の色が必要な場合は、これをchart.draw optionsに追加します。

colors: ['red','yellow', 'blue'],

ただし、バーが多すぎる場合は、これは不適切なオプションである可能性があります。

http://code.google.com/apis/chart/interactive/docs/reference.html#barformatter

12
Adithya Surampudi

なぜ誰もスタイルロール列を言及しなかったのかわかりません-最初の質問の後に追加されたと思いますが、今これを探している人にとっては、より良い方法は次のとおりです。

function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', '');
        data.addColumn({ type: 'string', role: 'style' });

        data.addRows(2);

        data.setValue(0, 0, 'Value 1');
        data.setValue(0, 1, 250);
        data.setValue(0, 2, 'rgb(200, 20, 60)');
        data.setValue(1, 0, 'Value 2');
        data.setValue(1, 1, 100);
        data.setValue(1, 2, 'rgb(20, 200, 60)');

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {
                width: 400, 
                height: 175, 
                title: 'Total',
                legend: 'none',
        });
    }

他の多くのCSSスタイルを設定して、グラフを本当に見苦しくすることができます。

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

Rgba（）で指定された色をサポートしていないようです-スタイルの役割に不透明度を設定する必要があります。

ここにフィドルがあります：

http://jsfiddle.net/a1og7rq4/

サイドノート：複数のシリーズがある場合、各シリーズデータ列の後にスタイルロール列が必要です。

これは、（不透明度も含めて）それを示す別のフィドルです： http://jsfiddle.net/v5hfdm6c/1

ここに変更された関数があります（明確にするために、変更されていない関数は上に残しました）。

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });

data.addRows(2);

var i = 0;
data.setValue(0, i++, 'Value 1');
data.setValue(0, i++, 200);
data.setValue(0, i++, 'color:rgb(200, 20, 60); opacity:0.5');
data.setValue(0, i++, 250);
data.setValue(0, i++, 'rgb(200, 20, 60)');

i = 0;
data.setValue(1, i++, 'Value 2');
data.setValue(1, i++, 120);
data.setValue(1, i++, 'color:rgb(20, 200, 60); opacity:0.5');
data.setValue(1, i++, 100);
data.setValue(1, i++, 'rgb(20, 200, 60)');

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
    width: 400, 
    height: 175, 
    title: 'Total',
    legend: 'none',
});

}

17
Whelkaholism

正確には、colors属性をoptions変数に挿入する必要があります。

...

var options = {
    width: 600, 
    height: 175, 
    title: 'Total',
    legend: 'none',
    colors: ['red', 'green']
};

chart.draw(data, options);
...
10
mpous

これをオプションに追加してください：

colors:['red','#009900']

お気に入り：

var options = {
          title: 'Company Performance',
          vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}},
          colors:['red','#009900']
};
3
Uma Shankar Pandey

円グラフを使用している場合：

slicesを追加

// Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300,
                    slices: {
                        0: { color: 'yellow' },
                        1: { color: 'transparent' }
                      }
                  };
0
JMASTER B

これが私の答えです。配列をdataTableに変換します

function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Season');
        data.addColumn('number', 'Deaths');
        data.addColumn({
            type: 'string',
            role: 'style'
        });

        var dataArray = new Array();
        dataArray[0] = ['Season 1', 1000, "#A0A0A0"]
        dataArray[1] = ['Season 2', 1170, "#FF3344"]
        dataArray[2] = ['Season 3', 660, "#BCBCBC"]
        dataArray[3] = ['Season 4', 1248, "#B3B3B8"]
        dataArray[4] = ['Season 5', 14353, "RED"];

        var charTitle = "Total deaths in Game of Thrones Series VS Screen Play Time";
        var noOfBars = dataArray.length;

        data.addRows(noOfBars);

        for (var row = 0; row < noOfBars; row++) {
            var label=dataArray[row][0];
            var value=dataArray[row][1];
            var color=dataArray[row][2];
                data.setValue(row, 0, label);
                data.setValue(row, 1, value);
                data.setValue(row, 2, color);
        }



    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, {
        width: 600,
        height: 300,
        title: charTitle,
    });
}

google.load("visualization", "1", {
    packages: ["corechart"],
    callback: function () {
        drawChart();
    }
});
0
Sujal Mandal