Question

使用Flot在网站上创建一大堆饼图。

我发现如果定义了图表，但是在给定的页面上，它所分配的div不存在或者没有设置高度/宽度，那么该图表以及之后定义的所有图表都不会显示。

问题是某些页面需要某些图表而其他页面则不需要。我想在一个地方定义图表并根据需要将它们放在适当的视图中，但是对于Flot Pie来说，似乎只要脚本没有放置给定图表的地方，此后脚本就会吹在该点之后没有加载图表。如果后续图表在另一个页面/视图上，则会发生这种情况。

Here's a fiddle illustrating the issue。如果删除HTML中的注释div，则其余图表将在运行时加载。但是注释掉这些div中的任何一个，控制台都会抛出错误：

Uncaught Error: Invalid dimensions for plot, width = null, height = null

...之后图表将无法加载。由于没有地方放图表，我理解错误。但是不应该简单地忽略它并且执行其余的脚本吗？

This issue has been asked about before on SO，但在我提出同样的问题之前，并没有作出评论。我不得不同意理查德的看法，如果它在实施中固有的话，这似乎是一个普遍的问题。有没有办法解决这个问题？

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文件加载不同的图表，问题仍然存在。

Answer 1

您尝试在不存在的div元素中绘制图表，因此您会收到错误并执行您的JavaScript。处理此问题的最佳方法是仅在此特定页面上绘制所需的图表。

另一种实现此功能的方法是捕获每个图表的例外情况，以便绘制以下图表而不管先前图表的错误。这适用于各种问题，而不仅仅是“未找到容器”。见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饼图

1 个答案: