Google Charts Sankey - 节点文本样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Google Charts Sankey - 节点文本样式相关的知识，希望对你有一定的参考价值。
有没有办法在Google的Sankey图中更改具有样式角色的目标节点文本的颜色？目前我有这样的数据设置：
[Source, Target, Label, Style]
[A,B,"Test Label", "#ffffff"]
我能够更改节点和链接的颜色，但不能更改文本。
在这一点上，d3对我来说不是一个选项，整个想法是让节点动画一个接一个地出现在它的位置 - 因此试图改变样式并重新绘制图表。由于节点更改位置，因此增长表无效。有任何想法吗？
答案
找不到使用标准选项设置单个节点文本样式的方法
但绘制图表后，可以手动设置颜色
通常情况下，图表的'ready'事件可用于了解图表何时完成绘图，
但是，图表将在每个交互式事件上恢复为默认的Node文本样式，
例如'onmouseover'，'onmouseout'和'select'
相反，使用变异观察器来更改任何交互性上的节点文本
请参阅以下工作代码段，它将颜色映射到每个节点文本...
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
['A', 'X', 5],
['A', 'Y', 7],
['A', 'Z', 6],
['B', 'X', 2],
['B', 'Y', 9],
['B', 'Z', 4]
]);
var options = {
width: 600
};
var colorMap = {
'A': 'cyan',
'X': 'magenta',
'Y': 'yellow',
'Z': 'lime',
'B': 'violet'
};
var chartDiv = document.getElementById('sankey_basic');
var chart = new google.visualization.Sankey(chartDiv);
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.tagName === 'text') {
node.setAttribute('font-size', '20');
node.setAttribute('fill', colorMap[node.innerhtml]);
}
});
});
});
observer.observe(chartDiv, {
childList: true,
subtree: true
});
chart.draw(data, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic"></div>以上是关于Google Charts Sankey - 节点文本样式的主要内容，如果未能解决你的问题，请参考以下文章