重命名flot饼图ID

Question

我试图通过使用flot图表来创建一个饼形图。我已经成功地用以下代码创建了一个：

HTML：

<div class="row">
   <div class="col-md-6">
      <div id="pie-chart"></div>
   </div>
</div>

Javascript：

    var data = [];

    data[0] = { label: "Vertification successful", data: 9 };
    data[1] = { label: "Vertification failed", data: 2 };
    var series = Math.floor(Math.random() * 10) + 1;
    $.plot($("#pie-chart"), data,
    {
        series: {
            pie: {
                show: true,
            }
        },
        grid: { hoverable: true },
    });

它显示得很好。问题是，如果我将div元素的ID更改为“饼图1”(而不是“饼图”)，并相应地更新javascript：

$.plot($("#pie-chart1"), data,

我得到以下错误：

图的未明无效尺寸，宽度= 501，高度=0

究竟是什么导致了这一切？我只是想重命名ID，显然由于某种原因是不可能的。

Answer 1

很有可能在你的站点其他地方有一些CSS或者JS，希望div被称为饼形图。您需要确保它仍然适用于新的div。例如，如果您有：

#pie-chart {
    width: 400px;
    height: 300px;
}

当您更改div的ID时，您也需要更新该引用，否则占位符的高度和宽度就没有定义，Flot无法处理。

如果添加该数字的目标是创建多个图表，则应该使用类来应用样式，而不是ID。