重命名Flot餅圖ID

Question

我正在嘗試通過使用浮動圖表創建餅圖。 我已經成功地用以下代碼創建了一個：

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”（而不是“ pie-chart”），並相應地更新了javascript：

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

我收到以下錯誤：

未捕獲到的無效尺寸圖，寬度= 501，高度= 0

到底是什么原因造成的？ 我只是想重命名ID，這顯然出於某種原因是不可能的。

Answer 1

您的網站上其他地方很可能有一些CSS或JS期望div稱為餅圖。 您需要確保它仍然適用於新的div。 例如，如果您有：

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

更改div的ID時，您也需要更新該引用，否則占位符的高度和寬度將變得不確定，這是Flot無法處理的。

如果添加該數字的目的是創建多個圖表，則應使用一個類來應用樣式而不是ID。