素材デザインGoogleの図表の色の変更列

Question

Googleの図表を使用している場合、通常は「役割：スタイル」機能を使用して個々の列の色を変更できますが、新しい素材設計図では、 。

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

    function drawStuff() { 
    var data = new google.visualization.arrayToDataTable([ 
     ['', '', { role: 'style' } ], 
     ["Strongly disagree", 0, 'color: black'], 
     ["Disagree", 0, 'color: #000000'], 
     ["Neutral", 6, 'color: #212121'], 
     ["Agree", 45, 'color: #212121'], 
     ['Stongly agree', 98, 'color: black'] 
    ]); 

    var options = { 
     title: 'Instructor presented the subject matter clearly', 
     width: 900, 
     legend: { position: 'none' }, 
     chart: { subtitle: 'General physics 221 CSUSB winter 2017' }, 
     axes: { 

     }, 

     bar: { groupWidth: "90%" } 
    }; 

    var chart = new google.charts.Bar(document.getElementById('top_x_div')); 
    // Convert the Classic options to Material options. 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
    }; 

Answer 1

あなたはNETXコードを試すことができます（https://github.com/google/google-visualization-issues/issues [いくつかのオプションがあります]

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

 
    function drawColColors() { 
 
    var data = new google.visualization.arrayToDataTable([ 
 
     ['', '', { role: 'style' } ], 
 
     ["Strongly disagree", 12, 'brown'], 
 
     ["Disagree", 30, 'gray'], 
 
     ["Neutral", 26, 'blue'], 
 
     ["Agree", 45, 'color: #F05921'], 
 
     ['Stongly agree', 58, 'black'] 
 
    ]); 
 

 
    var options = { 
 
     title: 'Instructor presented the subject matter clearly', 
 
     width: 900, 
 
     legend: { position: 'none' }, 
 
     chart: { subtitle: 'General physics 221 CSUSB winter 2017' }, 
 
     axes: { 
 

 
     }, 
 

 
     bar: { groupWidth: "90%" } 
 
    }; 
 

 
    //var chart = new google.charts.Bar(document.getElementById('chart_div')); 
 
    // Convert the Classic options to Material options. 
 
    //chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
     chart.draw(data, options); 
 
    };

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