如何使用JavaScript Plottable并排绘制两个图
[英]How to make two plots side-by-side using JavaScript Plottable
问题描述
使用以下脚本，我尝试制作并排饼图
var pies; var indata = [ { 'sample' : "Foo", "pies_pct":[ { "score": 6.7530200000000002, "celltype": "Bcells" }, { "score": 11.432763461538459, "celltype": "DendriticCells" }] }, { 'sample' : "Bar", "pies_pct":[ { "score": 26.8530200000000002, "celltype": "Bcells" }, { "score": 31.432763461538459, "celltype": "BCells" }] }, ]; processData(indata); function processData(data) { pies = data.map(function (data) { return { title : data.sample, dataset : data.pies_pct }; }); buildPlots(); } function buildPlots () { var $pieContainer = $('#sample-pies'); pies.forEach(function (pie, index) { var elementId = "sample-pie-" + index; $(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) .css({width: '200px', height: '200px', display: 'inline-block'}) .attr('id', elementId) .appendTo($pieContainer); plotSamplePie(pie.title, pie.dataset, '#' + elementId); }); } function plotSamplePie(title,purity_data,targetElement) { var scale = new Plottable.Scales.Linear(); var tableau20 = ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF']; var colorScale = new Plottable.Scales.Color(); var legend = new Plottable.Components.Legend(colorScale); colorScale.range(tableau20); var titleLabel = new Plottable.Components.TitleLabel(title); var plot = new Plottable.Plots.Pie() .addDataset(new Plottable.Dataset(purity_data)) .attr("fill", function(d) { return d.score; }, colorScale) .sectorValue(function(d) { return d.score; }, scale) .labelsEnabled(true); .renderTo(targetElement); }
<html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" /> </head> <body> My Plot <!-- Show histograms --> <div id="sample-pies"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script> </body> </html>
所以这个功能
-
processData()读取数据， -
buildPlots()逐块读取buildPlots()数据 -
plotSamplePie()绘制单个饼图。
但是为什么它不起作用？
我希望它显示出这样的情节：
1 个解决方案
解决方案1
1 已采纳 2015-12-03 05:09:25
如果可以在控制台中看到一个简单的错误。
var plot = new Plottable.Plots.Pie()
.addDataset(new Plottable.Dataset(purity_data))
.attr("fill", function(d) { return d.score; }, colorScale)
.sectorValue(function(d) { return d.score; }, scale)
.labelsEnabled(true);
.renderTo(targetElement);
只是移开; 在.labelsEnabled（true）;之后 它应该工作。
var indata = [ { 'sample' : "Foo", "pies_pct":[ { "score": 6.7530200000000002, "celltype": "Bcells" }, { "score": 11.432763461538459, "celltype": "DendriticCells" }] }, { 'sample' : "Bar", "pies_pct":[ { "score": 26.8530200000000002, "celltype": "Bcells" }, { "score": 31.432763461538459, "celltype": "BCells" }] }, ]; processData(indata); function processData(data) { pies = data.map(function (data) { return { title : data.sample, dataset : data.pies_pct }; }); buildPlots(); } function buildPlots () { var $pieContainer = $('#sample-pies'); pies.forEach(function (pie, index) { var elementId = "sample-pie-" + index; $(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) .css({width: '200px', height: '200px', display: 'inline-block'}) .attr('id', elementId) .appendTo($pieContainer); plotSamplePie(pie.title, pie.dataset, '#' + elementId); }); } function plotSamplePie(title,purity_data,targetElement) { var scale = new Plottable.Scales.Linear(); var tableau20 = ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF']; var colorScale = new Plottable.Scales.Color(); var legend = new Plottable.Components.Legend(colorScale); colorScale.range(tableau20); var titleLabel = new Plottable.Components.TitleLabel(title); var plot = new Plottable.Plots.Pie() .addDataset(new Plottable.Dataset(purity_data)) .attr("fill", function(d) { return d.score; }, colorScale) .sectorValue(function(d) { return d.score; }, scale) .labelsEnabled(true) .renderTo(targetElement); }
<html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" /> </head> <body> My Plot <!-- Show histograms --> <div id="sample-pies"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.15.0/plottable.js"></script> </body> </html>
如何在Javascript Plottable.js下使用独立比例制作两个直方图
[英]How to make two histogram plot using independent scale under Javascript Plottable.js
如何将相同的jQuery悬停动画应用于并排不同高度的两个div？
[英]How can I apply the same jQuery hover animation to two divs of different height side-by-side?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.