我有一个桑基图。它有 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/
我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po
尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub
我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search
由于fast-stemmer的问题，我很难安装我想要的任何rubygem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=
当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub
我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www
我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。
首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有， 也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加
SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手
文章目录git常用命令（简介，详细参数往下看）Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一：放弃本地代码方法二：合并代码常用命令以及详细参数gitadd将文件添加到仓库：gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支：gitbranch合并分支：gitmerge删除分支：gitbranch-ddev查看分支合并图：gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g