根据需要从外部js文件加载多个Flot饼图 [英] Loading multiple Flot pie charts from external js file as needed
问题描述
使用Flot在整个网站上创建一堆饼图.
Using Flot to create a whole bunch of pie charts across a site.
我发现，如果定义了图表，但是在给定的页面上，分配给它的div不存在或没有设置高度/宽度，该图表以及此后定义的所有图表都不会显示.
I'm finding that if a chart is defined, but on a given page the div it's assigned to isn't there or doesn't have the height/width set, that chart and all those defined thereafter do not display.
问题在于某些页面需要某些图表，而其他页面则不需要.我想在一处定义图表，并根据需要将它们放置在适当的视图中，但是对于Flot Pie，似乎只要脚本没有位置可以放置给定的图表，此后脚本便会立即崩溃向上，并且此后未加载任何图表.如果这些后续图表在另一页/视图上，甚至会发生这种情况.
The issue is that some charts are needed in some pages and not in others. I'd like to define the charts all in one place and place them in their appropriate views as needed, but with Flot Pie it seems that as soon as the script comes up with no place to put a given chart, the script thereafter simply blows up and no chart is loaded after that point. This even happens if those subsequent charts are on another page/view.
这是一个说明问题的小提琴.如果在HTML中删除带注释的div，则其余图表将在运行时加载.但是注释掉这些div中的任何一个，控制台将抛出错误:
Here's a fiddle illustrating the issue. If you remove the commented div in the HTML, the rest of the charts will then load when run. But comment out any of these divs, console will throw the error:
Uncaught Error: Invalid dimensions for plot, width = null, height = null
...，此后图表将无法加载.由于没有地方可以绘制图表，因此我理解该错误.但是难道不应该简单地忽略它并执行脚本的其余部分吗?
...and the charts will thereafter fail to load. Since there's nowhere to put the chart, I understand the error. But shouldn't it simply be ignored and the rest of the script executed?
此问题已在SO上被问过，但直到我遇到同一问题时，它才发表了很多评论.我必须同意Richard的看法，如果这是实现中固有的问题，这似乎将是一个常见问题.没办法解决吗?
This issue has been asked about before on SO, but didn't draw so much as a comment until I came along with the same issue. I'd have to agree with Richard that this seems like this would be a common problem if it's inherent in the implementation. Is there no way around this?
HTML:
<h2>Performance</h2>
<div id="container-flot-districtLMCore">
<div id="flot-placeholder-DistrictLMCore" style="width:340px;height:300px"></div>
</div>
<!--<h2>Creative Thinking</h2>
<div id="container-flot-creative">
<div id="flot-placeholder-creative" style="width:505px;height:300px"></div>
</div> Commenting this out blows up the script thereafter -->
<h2>Critical Thinking</h2>
<div id="container-flot-critical">
<div style="width:505px;height:300px;text-align:center;" id="flot-placeholder-critical"></div>
</div>
<h2>Affective Domain</h2>
<div id="container-flot-affective">
<div style="width:505px;height:300px;text-align:center;" id="flot-placeholder-affective"></div>
</div>
<h2>Attitudes</h2>
<div id="container-flot-attitudes">
<div style="width:505px;height:300px;text-align:center;" id="flot-placeholder-attitudes"></div>
</div>
jQuery:
$(document).ready(function () {
var dataSetDistrictLMCore = [
{label: "95% - 100%", data: 56, color: "#006837" },
{ label: "80% - 94%", data: 10, color: "#18859d" },
{ label: "70% - 79%", data: 9, color: "#ef9521" },
{ label: "Below 70%", data: 25, color: "#c62037" }
];
var dataSetCreative = [
{label: "Mastered", data: 26, color: "#007700" },
{ label: "Not Mastered", data: 14, color: "#cc0000" },
{ label: "Not Attempted", data: 60, color: "#ACAAA5" }
];
var dataSetCritical = [
{label: "Mastered", data: 24, color: "#007700" },
{ label: "Not Mastered", data: 49, color: "#cc0000" },
{ label: "Not Attempted", data: 27, color: "#ACAAA5" }
];
var dataSetAffective = [
{label: "Best Answer", data: 33.3, color: "#007700" },
{ label: "Other Answer", data: 33.3, color: "#cc0000" },
{ label: "No Answer", data: 33.3, color: "#ACAAA5" }
];
var dataSetAttitudes = [
{label: "Best Answer", data: 43.3, color: "#007700" },
{ label: "Other Answer", data: 13.3, color: "#cc0000" },
{ label: "No Answer", data: 43.3, color: "#ACAAA5" }
];
var options2 = {
series: {
pie: {
show: true,
innerRadius: 0.5,
label: {
show: true
},
offset: {
left: 0,
top: -24
}
}
}
};
$(window).load(function () {
$.plot($("#flot-placeholder-DistrictLMCore"), dataSetDistrictLMCore, options2);
$("#flot-placeholder-DistrictLMCore").showMemo();
$.plot($("#flot-placeholder-creative"), dataSetCreative, options2);
$("#flot-placeholder-creative").showMemo();
$.plot($("#flot-placeholder-critical"), dataSetCritical, options2);
$("#flot-placeholder-critical").showMemo();
$.plot($("#flot-placeholder-affective"), dataSetAffective, options2);
$("#flot-placeholder-affective").showMemo();
$.plot($("#flot-placeholder-attitudes"), dataSetAttitudes, options2);
$("#flot-placeholder-affective").showMemo();/**/
});
$.fn.showMemo = function () {
$(this).bind("plothover", function (event, pos, item) {
if (!item) { return; }
console.log(item.series.data)
var html = [];
var percent = parseFloat(item.series.percent).toFixed(2);
html.push("<div style=\"border:1px solid grey;background-color:",
item.series.color,
"\">",
"<span style=\"color:white\">",
item.series.label,
" : ",
$.formatNumber(item.series.data[0][1], { format: "#,###", locale: "us" }),
" (", percent, "%)",
"</span>",
"</div>");
$("#flot-memo").html(html.join(''));
});
};
});
我应该提一下，即使我试图从不同的docready甚至不同的js文件加载不同的图表，问题仍然存在.
I should mention that the issue persists even if I were to try to load different charts from a different docready or even a different js file.
推荐答案
您尝试在不存在的div元素内绘制图表，因此会出现错误并执行JavaScript.最好的解决方法是只在该特定页面上绘制所需的图表.
You try to draw a chart inside a non-existing div element, so you get an error and execution of your JavaScript holds. The best way to handle this is to only draw the charts you want on this specific page.
使此工作正常进行的另一种方法是捕获每个图表的异常，因此无论先前图表是否有错误，都将绘制以下图表.这适用于各种问题，不仅是未找到容器"问题.参见此小提琴:
Another way to get this working would be to catch the exceptions for each chart, so that the following charts will be drawn regardless of errors with the previous charts. This works for all kinds of problems, not only the "container not found" one. See this fiddle:
function drawChart(container, data) {
try {
$.plot($("#" + container), data, options2);
$("#" + container).showMemo();
} catch (ex) {
console.log(ex);
}
}
$(window).load(function () {
drawChart("flot-placeholder-DistrictLMCore", dataSetDistrictLMCore);
drawChart("flot-placeholder-creative", dataSetCreative);
drawChart("flot-placeholder-critical", dataSetCritical);
drawChart("flot-placeholder-affective", dataSetAffective);
drawChart("flot-placeholder-attitudes", dataSetAttitudes);
});
这篇关于根据需要从外部js文件加载多个Flot饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
