在Google Sankey Chart上显示下线
Cyr*_*ard 7 google-visualization
我想使用Google Sankey Chart来显示有多少玩家参加了测验,完成了测试,并赢得或失去了测验.我有以下代码:
google.charts.load('current', {'packages':['corechart','sankey']});
google.charts.setOnLoadCallback(drawChart);
//console.log(gameAssets);
function drawChart() {
var sankeydata = new google.visualization.DataTable();
sankeydata.addColumn('string', 'From');
sankeydata.addColumn('string', 'To');
sankeydata.addColumn('number', "Number of Players");
sankeydata.addRows([
[ "Number of Players","Completions", 391 ],
["Completions","Successful Completions",160],
["Number of Players","Exit" ,768],
["Completions","Unsuccessful Completions",231]
]);
// Sets chart options.
var options = {
width: 970,
sankey: {
node: {
width: 4 ,
colors: ['#883b90'],
label: {
fontSize: 14
}
},
link: {
color: { fill: '#f4eee2' }
}
}
};
var sankey_chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
sankey_chart.draw(sankeydata, options)
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
Run Code Online (Sandbox Code Playgroud)
我遇到的问题是没有完成测验的玩家(在Sankey图表上显示为"退出")位于最后一列(与成功完成和不成功完成相同的列).我宁愿把它与完成程度放在同一水平上.即使是更好的选择,也可以像google Analytics一样显示下降,红色箭头指向下方,如下所示:
是否可以使用Google Charts？
听起来你正在寻找__CODE__同时迭代所有列表.
google.charts.load('current', {'packages':['corechart','sankey']});
google.charts.setOnLoadCallback(drawChart);
//console.log(gameAssets);
function drawChart() {
var sankeydata = new google.visualization.DataTable();
sankeydata.addColumn('string', 'From');
sankeydata.addColumn('string', 'To');
sankeydata.addColumn('number', "Number of Players");
sankeydata.addRows([
[ "Number of Players","Completions", 391 ],
["Completions","Successful Completions",160],
["Number of Players","Exit" ,768],
["Completions","Unsuccessful Completions",231]
]);
// Sets chart options.
var options = {
width: 970,
sankey: {
node: {
width: 4 ,
colors: ['#883b90'],
label: {
fontSize: 14
}
},
link: {
color: { fill: '#f4eee2' }
}
}
};
var sankey_chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
sankey_chart.draw(sankeydata, options)
}
Run Code Online (Sandbox Code Playgroud)