如何在谷歌图表中制作圆角栏 [英] 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屋！