我有一个桑基图。它有 2 个部分 - 蔬菜和水果。我不想要蔬菜的触 Angular 。
这可能吗？
截图如下:
这是我当前的桑基图代码:
<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 ],
[ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ],
[ 'Fruits 29.8%', 'Banana 7.9%', 7.9 ],
[ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ],
[ 'Orange 9%', 'Apple 4.0%', 4.0 ],
[ 'Orange 9%', 'Banana 3.2%', 3.2 ],
[ 'Orange 9%', 'Grapes 1.7%', 1.7 ],
[ 'Apple 8.6%', 'Orange 4.8%', 4.8 ],
[ 'Apple 8.6%', 'Banana 2.0%', 2.0 ],
[ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ],
[ 'Banana 7.9%', 'Orange 3.4%', 3.4 ],
[ 'Banana 7.9%', 'Apple 2.9%', 2.9 ],
[ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ],
[ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ],
[ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ],
[ 'Grapes 4.3%', '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%','', 1],
[ 'Fruits 29.8%', 'Orange 9%', 9 ],
[ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ],
[ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ],
[ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ],
[ 'Orange 9%', 'Apple 4.0%', 4.0 ],
[ 'Orange 9%', 'Banana 3.2%', 3.2 ],
[ 'Orange 9%', 'Grapes 1.7%', 1.7 ],
[ 'Apple 8.6%', 'Orange 4.8%', 4.8 ],
[ 'Apple 8.6%', 'Banana 2.0%', 2.0 ],
[ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ],
[ 'Banana 7.9%', 'Orange 3.4%', 3.4 ],
[ 'Banana 7.9%', 'Apple 2.9%', 2.9 ],
[ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ],
[ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ],
[ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ],
[ 'Grapes 4.3%', '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 src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic"></div>我尝试了几种不同的值(value)组合
使用负权重值 (-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%','', -1],
[ 'Fruits 29.8%', 'Orange 9%', 9 ],
[ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ],
[ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ],
[ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ],
[ 'Orange 9%', 'Apple 4.0%', 4.0 ],
[ 'Orange 9%', 'Banana 3.2%', 3.2 ],
[ 'Orange 9%', 'Grapes 1.7%', 1.7 ],
[ 'Apple 8.6%', 'Orange 4.8%', 4.8 ],
[ 'Apple 8.6%', 'Banana 2.0%', 2.0 ],
[ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ],
[ 'Banana 7.9%', 'Orange 3.4%', 3.4 ],
[ 'Banana 7.9%', 'Apple 2.9%', 2.9 ],
[ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ],
[ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ],
[ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ],
[ 'Grapes 4.3%', '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 src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic"></div>编辑
由于没有标准选项可用于实现所需的结果，
图表的svg可以直接修改
图表将尝试恢复到每个事件的自然外观，
所以需要修改
'ready'、'select'、'onmouseover' 等...
请参阅以下工作片段，以获得所需的结果，
可能有必要再添加一两个事件，
或者你可能会想到另一种方法......
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%','', 1],
[ 'Fruits 29.8%', 'Orange 9%', 9 ],
[ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ],
[ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ],
[ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ],
[ 'Orange 9%', 'Apple 4.0%', 4.0 ],
[ 'Orange 9%', 'Banana 3.2%', 3.2 ],
[ 'Orange 9%', 'Grapes 1.7%', 1.7 ],
[ 'Apple 8.6%', 'Orange 4.8%', 4.8 ],
[ 'Apple 8.6%', 'Banana 2.0%', 2.0 ],
[ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ],
[ 'Banana 7.9%', 'Orange 3.4%', 3.4 ],
[ 'Banana 7.9%', 'Apple 2.9%', 2.9 ],
[ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ],
[ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ],
[ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ],
[ 'Grapes 4.3%', '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 container = document.getElementById('sankey_basic');
container.addEventListener('mouseover', fixVeggies, false);
container.addEventListener('mouseout', fixVeggies, false);
var chart = new google.visualization.Sankey(container);
google.visualization.events.addListener(chart, 'ready', fixVeggies);
google.visualization.events.addListener(chart, 'select', fixVeggies);
google.visualization.events.addListener(chart, 'onmouseover', fixVeggies);
google.visualization.events.addListener(chart, '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>更新
上述解决方案有效，但某些事件滞后
Vegetables 行上的突出显示出现“闪烁”或“闪烁”
正如它在某些事件中显示的那样，然后被删除
使用 MutationObserver 允许我们在应用高亮之前移除它
从而消除了前面示例中出现的“闪烁”
使用 MutationObserver 查看以下工作片段......
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%','', 1],
[ 'Fruits 29.8%', 'Orange 9%', 9 ],
[ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ],
[ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ],
[ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ],
[ 'Orange 9%', 'Apple 4.0%', 4.0 ],
[ 'Orange 9%', 'Banana 3.2%', 3.2 ],
[ 'Orange 9%', 'Grapes 1.7%', 1.7 ],
[ 'Apple 8.6%', 'Orange 4.8%', 4.8 ],
[ 'Apple 8.6%', 'Banana 2.0%', 2.0 ],
[ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ],
[ 'Banana 7.9%', 'Orange 3.4%', 3.4 ],
[ 'Banana 7.9%', 'Apple 2.9%', 2.9 ],
[ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ],
[ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ],
[ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ],
[ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ],
]);
var options = {
width: 1000,
height:600,
sankey: {
node: {
label: {
fontName: 'sans-serif',
fontSize: 17,
color: '#000',
bold: true,
italic: false
},
interactivity: true,
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>关于javascript - Sankey 图表的 Google 图表问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39285078/