charts - 谷歌用/单系列 Material 条形图绘制不同颜色的图表

Question

使用 {role: 'style'} 我可以将不同的颜色应用于单个系列条形图。但是如果我使用新的谷歌“ Material ”条形图，我不能。

“常规”谷歌图表(有效):

google.load("visualization", '1.1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {

   var data = google.visualization.arrayToDataTable([
       ['Element', 'Density', {role: 'style'} ],
       ['Copper', 8.94, 'color: #FF9900'],
       ['Silver', 10.49,'color: #109618'],
       ['Gold', 19.30,'color: #3B3EAC'],
       ['Platinum', 21.45,'color: #0099C6']
    ]);       

    var view = new google.visualization.DataView(data);


    var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: '85%'},
        legend: { position: 'none' },
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('barchart_values'));
    chart.draw(view, options);
}

相同的图表，但使用谷歌“ Material ”条形图(不应用不同的颜色)

google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

   var data = google.visualization.arrayToDataTable([
       ['Element', 'Density', { role: 'style' } ],
       ['Copper', 8.94, 'color: #FF9900'],
       ['Silver', 10.49,'color: #109618'],
       ['Gold', 19.30,'color: #3B3EAC'],
       ['Platinum', 21.45,'color: #0099C6']
  ]);   

  var view = new google.visualization.DataView(data);


  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {groupWidth: '95%'},
    legend: { position: 'none' },
  };
    options = google.charts.Bar.convertOptions(options);
    var chart = new google.charts.Bar(document.getElementById('barchart_values'));
    chart.draw(view, options);
}

Answer 1

看来真的是不可能了。使用单独颜色的 Material 图表在任何地方都没有 clou，如果您以旧方式设置颜色数组，例如 colors: [...] Material 图表仅采用第一种颜色并将其添加到所有条形图上。我相信这根本没有在 Material Charts 中实现(还没有？)。

但是如果你真的想给条形上色，你可以通过代码来完成:

function colorize() {
   var colors = ['#FF9900', '#109618', '#3B3EAC', '#0099C6'],
       svg = document.getElementById('barchart_values').querySelector('svg'),
       bars = svg.querySelectorAll('path');

   for (var i=0;i<bars.length;i++) {
       if (i !== selected) bars[i].setAttribute('fill', colors[i]);
   }    
}

colors[]是来自您 data 的颜色 DataTable以上。仅针对 <path> 是安全的的，因为可视化条形的路径是 <svg> 中唯一存在的路径.

这个函数可以由 ready 事件触发:

google.visualization.events.addListener(chart, 'ready', colorize);    

由于图表在 select 上不断重绘和 onmouseover ，也将监听器附加到这些事件:

google.visualization.events.addListener(chart, 'select', colorize);
google.visualization.events.addListener(chart, 'onmouseover', colorize);

并让用户能够选择一个栏，即不要重绘选定的栏:

function colorize() {
   var colors = ['#FF9900', '#109618', '#3B3EAC', '#0099C6'],
       selection = chart.getSelection(),
       selected = selection[0] ? selection[0].row : -1,
       svg = document.getElementById('barchart_values').querySelector('svg'),
       bars = svg.querySelectorAll('path');

   for (var i=0;i<bars.length;i++) {
       if (i !== selected) bars[i].setAttribute('fill', colors[i]);
   }    
}

您的 Material 图表添加了上面的代码 -> http://jsfiddle.net/o00oayvu/