材料設計谷歌圖表更改顏色列

使用Google圖表時，通常可以使用「role：style」函數更改各個列的顏色，但是當我嘗試使用新的材質設計圖表時，我只會看到藍色列。材料設計谷歌圖表更改顏色列

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

來源

2017-04-11 Paulo Costa

[有幾個選項（https://github.com/google/google-visualization-issues/issues/2143）_material_圖表不支持 - 包括列角色 - 檢查[此答案]（http://stackoverflow.com/a/36452554/5090771）的顏色選項... – WhiteHat

您可以NETX代碼嘗試：

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>

來源

2017-11-29 22:10:20

材料設計谷歌圖表更改顏色列

回答

相關問題