如何在谷歌图表中制作圆角栏 [英] How to make rounded corner bars in google charts
问题描述
我有以下图表,有方括号
有没有标准配置选项更改列的形状
但您可以在图表的准备好
事件触发时直接修改svg
但是,在任何其他事件
上,图表将恢复原始形状,因此需要修改, br>
- > 'ready'
,'select'
, onmouseover'
,'onmouseout'
可更改< c $ c> rx 和 ry
以确保我们有正确的 rect
元素,
custom colors
提供给图表
,然后选中 fill
属性,以查看其是否存在于颜色
rect
带有填充的元素
属性'none'
也包括在内,
这将是 rect
用于突出显示'onmouseover'
以及 rect
元素与笔画
属性'#ffffff'
,
要标记所选列
另一个注释,svg会将任何颜色
更改为小写,
所以小写颜色
用于数组
请参阅下面的工作片段...
google.charts.load('current',{callback:function {var data = google.visualization.arrayToDataTable([['Month','2015','2016'],['Jan',10,15],['Feb',12,18],['Mar' 14,21],['Apr',16,24]]); var container = document.getElementById('chart_div'); var chart = new google.visualization.ColumnChart(container); var colors = ['#cd6155','#5499c7']; google.visualization.events.addListener(chart,'ready',changeBorderRadius); google.visualization.events.addListener(chart,'select',changeBorderRadius); google.visualization.events.addListener(chart,'onmouseover',changeBorderRadius); google.visualization.events.addListener(chart,'onmouseout',changeBorderRadius); function changeBorderRadius(){chartColumns = container.getElementsByTagName('rect'); Array.prototype.forEach.call(chartColumns,function(column){if((colors.indexOf(column.getAttribute('fill'))> -1)||(column.getAttribute('fill')=== 'none')||(column.getAttribute('stroke')==='#ffffff')){column.setAttribute('rx',20); column.setAttribute('ry',20);}}) ; } chart.draw(data,{colors:colors}); },packages:['corechart']});
< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_div>< / div>
I have following chart with square bars
I want it to make rounded corner bars with google charts like below pic
there are no standard configuration options to change the shape of the column
but you can modify the svg directly when the chart's 'ready'
event fires
however, the chart will revert back to the original shape, on any other event
so need to modify, anytime an event is fired
--> 'ready'
, 'select'
, 'onmouseover'
, 'onmouseout'
to change the border radius of a rect
element, use the attributes rx
and ry
to ensure we have the correct rect
elements,
custom colors
are provided to the chart
then the fill
attribute is checked, to see if it exists in colors
rect
elements with a fill
attribute of 'none'
are also included,
this will be the rect
used to highlight the column 'onmouseover'
as well as rect
elements with a stroke
attribute of '#ffffff'
,
which are used to mark the selected column
one other note, the svg appears to change any colors
to lower case,
so lower case colors
are used in the array
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', '2015', '2016'],
['Jan', 10, 15],
['Feb', 12, 18],
['Mar', 14, 21],
['Apr', 16, 24]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
var colors = ['#cd6155', '#5499c7'];
google.visualization.events.addListener(chart, 'ready', changeBorderRadius);
google.visualization.events.addListener(chart, 'select', changeBorderRadius);
google.visualization.events.addListener(chart, 'onmouseover', changeBorderRadius);
google.visualization.events.addListener(chart, 'onmouseout', changeBorderRadius);
function changeBorderRadius() {
chartColumns = container.getElementsByTagName('rect');
Array.prototype.forEach.call(chartColumns, function(column) {
if ((colors.indexOf(column.getAttribute('fill')) > -1) ||
(column.getAttribute('fill') === 'none') ||
(column.getAttribute('stroke') === '#ffffff')) {
column.setAttribute('rx', 20);
column.setAttribute('ry', 20);
}
});
}
chart.draw(data, {
colors: colors
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
这篇关于如何在谷歌图表中制作圆角栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!