Question

我有时间轴数据的面积图和像这样的当前分布数据的PieChart 两者都有相同的颜色。区域图表区域有一定的透明度，而Piechart看起来更亮。是否有任何配置使Piechart区域也更轻？

PS：我可以通过设置'areaOpacity': 10使区域图表更亮，但我的期望是让图表更亮。

Answer 1

饼图中没有alpha不透明度的标准选项但是，您可以在绘制图表后手动修改图表

使用标准的十六进制颜色绘制图表，
然后替换图表元素上的fill属性，
使用相同颜色的rgba版本

为了替换颜色，您需要使用<div> @Html.DropDownListFor(model => model.listBulletinBoardsMessages, Model.listBulletinBoardsMessages.Select(b => new SelectListItem() { Value = b.Department, Text = b.Department }), "All Departments", new { @class = "form-control", id="selected_listBulletinBoardsMessages" }) </div>
当您与图表交互时，会添加/重新绘制元素因此，每次发生这种情况时都必须更换颜色

另外，您还想使用小写六角形字符串，
为了找到元素上的颜色
在绘制图表时，它们会转换为小写

请参阅以下工作代码段...

＆＃13;

MutationObserver

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     16],
    ['Eat',      2],
    ['Sleep',    6]
  ]);

  colorsHex = [
    '#922b21',
    '#1e8449',
    '#007fff'
  ];
  colorsRgba = [
    'rgba(146,43,33,0.6)',
    'rgba(30,132,73,0.6)',
    'rgba(0,127,255,0.6)'
  ];

  var options = {
    colors: colorsHex,
    height: 400,
    title: 'My Daily Activities'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);

  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      mutation.addedNodes.forEach(function (node) {
        changeColor(node);
      });
    });
  });
  observer.observe(container, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);

  function changeColor(element) {
    if (element.getAttribute('fill') !== null) {
      var colorIndex = colorsHex.indexOf(element.getAttribute('fill'));
      if (colorIndex > -1) {
        element.setAttribute('fill', colorsRgba[colorIndex]);
      }
    } else {
      Array.prototype.forEach.call(element.children, function(child) {
        changeColor(child);
      });
    }
  }
});

＆＃13;

在Google图表上为饼图区域设置Alpha不透明度

1 个答案: