Google視覚化 - 円グラフのスライスの色を設定

Question

円チャートに使用するデータテーブルがあり、行の値に基づいてスライスの色を設定する必要があります。たとえば、自動車販売のタイプ（リース、現金、財務など）の表があり、それぞれに色を指定したいとします。ドキュメントでは、これを棒グラフで行うことは可能ですが、スライスではできません。

var pieChart = new google.visualization.ChartWrapper({ 
    options : { 
     ... 
     slices: [{color: 'black'}, {color: 'green'}, {color: 'red'}] 
    } 
}); 

色がレンダリングさが、私はleaseためblackを指定したい：私は、次の試してみました。どのように私はこれを動作させることができます上の任意のアイデア？ slicesアレイ内

Answer 1

色は黒に'Lease'ため

data.addRows([ 
    ['Cash', 5], 
    ['Finance', 20], 
    ['Lease', 15] 
]); 

...次の行で、

ので、データテーブル内の行と同じ順序であるべきで、それがすべきアレイ

slices: [{color: 'green'}, {color: 'red'}, {color: 'black'}] 

---

の注文の場合に最後の色であります行不明である、あなたが動的に

色を設定色

// create color map 
var colors = { 
    'Cash': 'green', 
    'Finance': 'red', 
    'Lease': 'black' 
}; 

ためのマップを作成するためにオブジェクトを使用することができ、データテーブルに

// build slices 
var slices = []; 
for (var i = 0; i < data.getNumberOfRows(); i++) { 
    slices.push({ 
    color: colors[data.getValue(i, 0)] 
    }); 
} 

を値に基づいて、スライスの配列を作成

作業スニペット以下を参照してください...

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

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'sales'); 
 
    data.addColumn('number', 'count'); 
 
    data.addRows([ 
 
    ['Cash', 5], 
 
    ['Finance', 20], 
 
    ['Lease', 15] 
 
    ]); 
 
    data.sort([{column: 1, desc: true}]); 
 

 
    // create color map 
 
    var colors = { 
 
    'Cash': 'green', 
 
    'Finance': 'red', 
 
    'Lease': 'black' 
 
    }; 
 

 
    // build slices 
 
    var slices = []; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
    slices.push({ 
 
     color: colors[data.getValue(i, 0)] 
 
    }); 
 
    } 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.PieChart(container); 
 
    chart.draw(data, { 
 
    slices: slices 
 
    }); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>