我有以下代码:
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": "DendriticCells"
}]
}, ];
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);
new Plottable.Components.Table([
[titleLabel],
[plot]
]).renderTo(targetElement);
}
function drawPieLegend(targetElement) {
new Plottable.Components.Legend(colorScale)
.renderTo(targetElement);
}
drawPieLegend('#pies-legend')<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>
Legend here:
<div id="pies-legend"></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>我想做的是在 '#pies-legend' 下显示两个饼图的 one 图例作为函数 drawPieLegend 调用的目标元素()。但是为什么没有出现呢？
最佳答案
colorScale 是在 plotSamplePie() 中定义的，因此它不会出现在 drawPieLegend() 的范围内。在两个函数外声明 colorScale 将使两个函数都可以访问它(尽管这有点困惑，因为它现在是一个全局变量)。在处理函数内创建 colorScale 可能会更简洁，然后将其传递给分别制作饼图和图例的函数。这是修复它的快速尝试:
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": "DendriticCells"
}]
}, ];
var colorScale = new Plottable.Scales.Color();
var tableau20 = ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728',
'#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF'
];
colorScale.range(tableau20);
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 titleLabel = new Plottable.Components.TitleLabel(title);
var plot = new Plottable.Plots.Pie()
.addDataset(new Plottable.Dataset(purity_data))
.attr("fill", function(d) {
return d.celltype;
}, colorScale)
.sectorValue(function(d) {
return d.score;
}, scale)
.labelsEnabled(true);
new Plottable.Components.Table([
[titleLabel],
[plot]
]).renderTo(targetElement);
}
function drawPieLegend(targetElement) {
new Plottable.Components.Legend(colorScale)
.maxEntriesPerRow(Infinity)
.renderTo(targetElement);
}
drawPieLegend('#pies-legend');<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>
Legend here:
<svg id="pies-legend" height="50" width="400"></svg>
<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>还要注意来自
的变化.attr("fill", function(d) {
return d.score;
}, colorScale)
到
.attr("fill", function(d) {
return d.celltype;
}, colorScale)
这会导致颜色由 celltype 而不是 score 驱动。
关于javascript - 如何在 Plottable.js 多图中显示图例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34058504/