我有一张Sankey图表.它有2个部分 – 蔬菜和Frutis.我不想要触手蔬菜.
那可能吗？
这是截图：
这是我目前的Sankey Chart代码：
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style>
.my-padding {
margin-top: 50px;
margin-bottom: 50px;
margin-right:50px;
}
</style>
<script type="text/javascript">
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([
[ 'Vegetables 70.2%',70.2],[ 'Fruits 29.8%','Orange 9%',9 ],'Apple 8.6%',8.6 ],'Banana 7.9%',7.9 ],'Grapes 4.3%',4.3 ],[ 'Orange 9%','Apple 4.0%',4.0 ],'Banana 3.2%',3.2 ],'Grapes 1.7%',1.7 ],[ 'Apple 8.6%','Orange 4.8%',4.8 ],'Banana 2.0%',2.0 ],'Grapes 1.8%',1.8 ],[ 'Banana 7.9%','Orange 3.4%',3.4 ],'Apple 2.9%',2.9 ],'Grapes 2.4%',[ 'Grapes 4.3%','Orange 1.6%',1.6 ],'Banana 1.4%',1.4 ],'Apple 1.3%',1.3 ],]);
// Sets chart options.
var options = {
width: 1000,height:600,sankey: {
node: {
label: {
fontName: 'sans-serif',fontSize: 17,color: '#000',bold: true,italic: false
},interactivity: true,// Allows you to select nodes.
labelPadding: 10,// Horizontal distance between the label and the node.
nodePadding: 10,// Vertical distance between nodes.
}
}
};
// Instantiates and draws our chart,passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data,options);
}
</script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-6 my-padding">
<div id="sankey_basic" ></div>
</div>
</div>
</div>
</body>
</html>
解决方法
您可以使用空白字符串(”)来删除单词null
和(1)的权重值以减小链接的大小
[‘蔬菜70.2％’,”,1],
请参阅以下工作代码段…
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([
[ 'Vegetables 70.2%','','Banan 7.9%',]);
// Sets chart options.
var options = {
width: 1000,sankey: {
node: {
label: {
fontName: 'sans-serif',italic: false
},// Allows you to select nodes.
labelPadding: 10,// Horizontal distance between the label and the node.
nodePadding: 10,// Vertical distance between nodes.
}
}
};
// Instantiates and draws our chart,passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data,options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_basic"></div>
我尝试了几种不同的值组合
使用负权重值(-1)似乎产生了你想要的
[‘蔬菜70.2％’,– 1],
但是 – 图表会截断一半的文字
尝试了几次调整来修复截止,没有运气
如大小,填充,边距,字体等…
也许你可以让它工作,请参阅以下片段…
google.charts.load('current',-1],options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_basic"></div>
编辑
因为没有可用的标准选项来达到预期的效果,
图表的svg可以直接修改
图表将尝试恢复每个事件的自然外观和感觉,
所以需要修改它
‘准备’,’选择’,’onmouSEOver’等…
请参阅以下工作代码段,以获得所需的结果,
可能需要添加另一个或两个事件,
或者你可能想到另一种方法……
google.charts.load('current',passing in some options.
var container = document.getElementById('sankey_basic');
container.addEventListener('mouSEOver',fixVeggies,false);
container.addEventListener('mouSEOut',false);
var chart = new google.visualization.Sankey(container);
google.visualization.events.addListener(chart,'ready',fixVeggies);
google.visualization.events.addListener(chart,'select','onmouSEOver','onmouSEOut',fixVeggies);
function fixVeggies() {
container.getElementsByTagName('path')[0].setAttribute('fill','#ffffff');
container.getElementsByTagName('rect')[0].setAttribute('fill','#ffffff');
container.getElementsByTagName('rect')[1].setAttribute('fill','#ffffff');
}
chart.draw(data,options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_basic"></div>
UPDATE
上述解决方案有效,但某些事件滞后
而蔬菜排上的突出显示为“闪烁”或“闪烁”
因为它在某些事件中显示,然后被删除
使用MutationObserver允许我们在应用之前删除突出显示
从而消除了前一个例子中看到的“闪烁”
使用MutationObserver查看以下工作代码段…
google.charts.load('current','Weight');
data.addRows([
[ 'Vegetables 70.2%',]);
var options = {
width: 1000,sankey: {
node: {
label: {
fontName: 'sans-serif',italic: false
},labelPadding: 10,nodePadding: 10,}
}
};
var container = document.getElementById('sankey_basic');
var chart = new google.visualization.Sankey(container);
// remove shading from vegetable row
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.tagName === 'path') {
var desc = node.getAttribute('d').split(',');
if ((desc.length > 0) && (desc[2] === '0')) {
node.setAttribute('fill','#ffffff');
}
}
if (node.tagName === 'rect') {
if (parseInt(node.getAttribute('y')) === 0) {
node.setAttribute('fill','#ffffff');
}
}
});
});
});
var config = { childList: true,subtree:true };
observer.observe(container,config);
chart.draw(data,options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_basic"></div>
