Googleのグラフの色は円グラフ

Question

同じソースデータの円チャートと円グラフがあります。

私は、棒グラフの色は、円グラフのようcorrsponding色を持っていると思います。これらはデフォルトのGoogle Chartsの色です（順番に）。したがって、最初の列は青、2番目の赤、3番目の黄、4番目の緑でなければなりません。これを達成する方法は？ 、同じシリーズ内の値は

シリーズは、デフォルトで、異なる色を有するように、列によって定義され、デフォルトでは同じ色であるカラムチャートで

Answer 1

、
場所別個カラム

の各値しかし、これは次のようにデータを構造化する場合、あなたは、x軸のラベル
を失うあなただけのすべての列

012のための1つのラベルを持っている問題

を提示します

var data = google.visualization.arrayToDataTable([ 
    ['x', 'y0', 'y1', 'y2', 'y3'], 
    ['Razina0', 898, 37319, 8980, 35400] 
]); 

あなたは次のアプローチをしようとした場合、その列は最良のオプションは、スタイルのコラム
にこの意志を使用することです適切
null値

var data = google.visualization.arrayToDataTable([ 
    ['x', 'y0', 'y1', 'y2', 'y3'], 
    ['Razina0', 898, null, null, null], 
    ['Razina1', null, 37319, null, null], 
    ['Razina2', null, null, 8980, null], 
    ['Razina3', null, null, null, 35400], 
]); 

のためのギャップがあるでしょう離間されません。あなたは現在のデータ構造
を維持し、各列

ごとに異なる色を提供できるようにする唯一の欠点は、あなたが色を提供する必要がある
ので、次のような

---

デフォルトの色を失い、パイは、パイチャートの'ready'イベントが発生

には、次の作業を見ると、各スライス
に割り当てられた色を使用し、最初の
をグラフ描画をお勧めしますスニペット...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y0'], 
 
    ['Razina0', 898], 
 
    ['Razina1', 37319], 
 
    ['Razina2', 8980], 
 
    ['Razina3', 35400] 
 
    ]); 
 

 
    var chartPie = new google.visualization.PieChart(document.getElementById('chart_pie')); 
 
    var chartColumn = new google.visualization.ColumnChart(document.getElementById('chart_column')); 
 

 
    google.visualization.events.addListener(chartPie, 'ready', function() { 
 
    var colIndex = data.addColumn({type: 'string', role: 'style'}); 
 
    $.each($('#chart_pie path'), function (rowIndex) { 
 
     data.setValue(rowIndex, colIndex, $(this).attr('fill')); 
 
    }); 
 

 
    chartColumn.draw(data, { 
 
     legend: { 
 
     position: 'none' 
 
     } 
 
    }); 
 
    }); 
 

 
    chartPie.draw(data, { 
 
    height: 240 
 
    }); 
 
}

div { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_pie"></div> 
 
<div id="chart_column"></div>