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更改为“pie-chart1”（而不是“饼图”）并相应地更新javascript：

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

我收到以下错误：

未捕获绘图的尺寸无效，宽度= 501，高度= 0

究竟是什么造成这种情况？我只想重新命名ID，这显然是出于某种原因是不可能的。

Answer 1

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

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

当您更改div的ID时，您还需要更新该引用，否则占位符的高度和宽度将变为未定义，Flot无法处理。

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

重命名flot饼图ID

1 个答案: