以编程方式自定义样式

Question

我使用google图表中的“新”Material Charts。它目前缺乏很多来自经典图表的选项，包括图例位置。

不能设置图例位置，我不得不隐藏内置图例并在canvas下面的html中渲染我自己的图例。我还需要手动实现交互性，这是我的问题所在：

材料图表具有悬停和选择状态的样式，因此当用户悬停或选择图例中的给定列时，图形会响应其操作。我可以通过API轻松控制选择状态，但看起来像没有办法控制悬停状态。

那么，有没有什么办法以编程方式自定义样式，以便我可以在用户悬停自定义图例时模仿悬停状态？

Answer 1

在BarChart或ColumnChart列将由<rect>元件

但是，还会有其他<rect>元素，图表本身，网格线等如表示

所以找到正确<rect>元素以修改通常是最难的部分

---

一旦找到元素，使用MutationObserver覆盖风格，每次活动发生

看到下面的工作片段，

列的颜色切换出去rgba，支持透明度...

google.charts.load('current', { 
 
    callback: function() { 
 
    window.addEventListener('resize', drawChart, false); 
 
    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 
 
    var observer = new MutationObserver(function() { 
 
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect) { 
 
     if (seriesColors.indexOf(rect.getAttribute('fill')) > -1) { 
 
     rect.setAttribute('fill', rgbaMap[rect.getAttribute('fill')]); 
 
     } 
 
    }); 
 
    }); 
 
    observer.observe(chartDiv, { 
 
    childList: true, 
 
    subtree: true 
 
    }); 
 

 
    chart.draw(data, options); 
 
}

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

编辑

下面是表示列

<rect x="283" y="113" width="27" height="48" stroke="none" stroke-width="0" fill="rgba(0,255,0,0.5)"></rect>

，你会发现没有为'id'

属性可以通过索引来访问，但是一个典型的<rect>元素的例子，因为有更多的比列<rect>元素，你需要另外

使用类似width或fill通过索引访问...

chartDiv.getElementsByTagName('rect')[0]
chartDiv.getElementsByTagName('rect')[1]

设置特定的颜色是一种简单的方法来识别，类似上面的代码片段...