Полупрозрачные цвета в Google Графиках?

Вызов какПолупрозрачные цвета в Google Графиках?

chart.draw(data, { colors: ['#e0440e', '#e6693e', '#ec8f6e', ...], ... });

creates a chart with colors looking like semi-transparent. Однако мы передали цвета RGB без альфа-параметра!

В других приложениях диаграммы (например, jqPlot, CanvasJS и т.д.), вы можете передать Rgba звонки вместо этого, как и в

[ 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', ...]

Google Charts, кажется, не поддерживает это. Но есть ли другой способ передать пользовательские цвета RGBA вместо простого синтаксиса?

PS: есть какой-то подобный вопрос для круговых диаграмм, но у меня разные, для пользовательских цветовых палитр.

источник

2016-10-26 Cristi S.

мне было интересно, то же самое, я считаю, что единственный способ это возможно, чтобы написать JavaScript, который манипулирует SVG. – zer00ne

как только 'ready' пожаров событий на графике, вы можете изменить SVG

просто нужен способ, чтобы найти элементы диаграммы, которые вы хотите изменить

в следующий рабочий фрагмент кода, случайные цвета используются для кормить диаграмму

тогда, когда 'ready' пожары, эти цвета будут найдены и заменены RGBA

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Year', 'Y1', 'Y2'], 
 
    ['2010', 10, 14], 
 
    ['2020', 14, 22], 
 
    ['2030', 16, 24], 
 
    ['2040', 22, 30], 
 
    ['2050', 28, 36] 
 
    ]); 
 

 
    var seriesColors = ['#00ffff', '#ff00ff']; 
 
    var rgbaMap = { 
 
    '#00ffff': 'rgba(0,255,0,0.5)', 
 
    '#ff00ff': 'rgba(255,0,0,0.5)' 
 
    }; 
 

 
    var options = { 
 
    colors: seriesColors, 
 
    }; 
 

 
    var chartDiv = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ColumnChart(chartDiv); 
 

 
    // modify svg 
 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect) { 
 
     if (seriesColors.indexOf(rect.getAttribute('fill')) > -1) { 
 
     rect.setAttribute('fill', rgbaMap[rect.getAttribute('fill')]); 
 
     } 
 
    }); 
 
    }); 
 

 
    chart.draw(data, options); 
 
}

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

источник

2016-10-27 12:21:37 WhiteHat

отличное решение! Чтобы сделать его более общим (для работы с пирогом), я обработал все элементы с атрибутом fill в теге svg: синтаксис jQuery: $ ("svg"). Find ("* [fill]"). Each (...). –

, который работает тоже - просто fyi: используйте значения HEX для диаграммы подачи вместо цвета _names_, такие как ''red', 'black'' - диаграмма в любом случае изменит значение fill на эквивалент HEX (' '# ff0000 ',' # 000000''), что может привести к сбою поиска ... – WhiteHat

мы всегда должны использовать значения цвета в формате в шестнадцатеричном формате или rgba при расширении с непрозрачностью. Я думаю, что это плохая практика и трудно поддерживать, чтобы смешивать ее с названиями цветов или трехзначной нотации (как в # fa0 для # ffaa00). Еще одно важное замечание: все шестнадцатеричные значения должны быть в нижнем регистре, иначе код не будет работать! Это связано с тем, что все значения заполнения, такие как # FFAA00, автоматически переводятся в # ffaa00. –

Использовать $ .attr ('непрозрачность', значение) для всех элементов, отфильтрованных цветами. exapmle с JQuery ...

var options = { 
 
    colors: ['#ff5722', '#1976D2', '#2196f3', '#BBDEFB', '#BDBDBD'] 
 
    }, 
 
    conteiner = $('div'), 
 
    data = {},//some data 
 
    chart = new 
 
google.visualization.PieChart(conteiner); 
 

 
google.visualization.events.addListener(chart, 'ready', function() { 
 
    chartSetColorOpacity(conteiner, 0.8, options.colors); 
 
}); 
 

 
google.visualization.events.addListener(chart, 'onmouseout', function() { 
 
    chartSetColorOpacity(conteiner, 0.8, options.colors); 
 
}); 
 

 
google.visualization.events.addListener(chart, 'onmouseover', function (target) { 
 
    chartSetColorOpacity(conteiner, 0.8, options.colors); 
 
}); 
 

 
google.visualization.events.addListener(chart, 'select', function (target) { 
 
    chartSetColorOpacity(conteiner, 0.8, options.colors); 
 
}); 
 

 
chart.draw(data, options); 
 
     
 
function chartSetColorOpacity($container, opacity, matchColors){ 
 

 
    $container = $($container); 
 

 
    if(!$container.is('svg')){ 
 
     $container = $container.find('svg'); 
 
    } 
 

 
    if(typeof opacity === "number"){ 
 
     opacity = String(opacity); 
 
    }else if(typeof opacity !== "string"){ 
 
     throw new Error('function chartSetColorOpacity(): opacity is not correct! opacity=' + opacity); 
 
    } 
 

 
    if(matchColors){ 
 
     if(typeof matchColors === "string") { 
 
      matchColors = [matchColors]; 
 
     } 
 
    }else { 
 
     matchColors = false; 
 
    } 
 

 
    $container.find('*[fill]:not(opacity)').each(function(indx, element){ 
 

 
     var $this = $(this); 
 

 
     if(matchColors !== false) { 
 

 
      var matched = false, 
 
       color = $this.attr('fill').toUpperCase(); 
 

 
      for (var i = matchColors.length - 1; i >= 0; i--) { 
 
       if (matchColors[i].toUpperCase() == color) { 
 
        matched = true; 
 
        break; 
 
       } 
 
      } 
 

 
      if (!matched) return; 
 

 
     } 
 

 
     $this.attr('opacity', opacity); 
 

 
    }); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

источник

2017-02-24 14:10:32

Полупрозрачные цвета в Google Графиках?

ответ

Смежные вопросы