使用flot的饼图

Pie chart using flot

本文关键字：flot 使用      更新时间：2023-09-26

我正在使用Jquery Flot创建一个基于三个不同值的饼图，即暂停、非暂停和睡眠。最初它正确地绘制了饼图，但在重新绘制之后，它给了我以下错误。

无法使用画布中包含的标签绘制饼图

我的代码是

Lecturer.socket.onmessage = function (message) {
   var str = message.data;
   var msg = str.split(":");
   if(msg[0] == 'pause'){
       var pause = parseInt(msg[1]);
       var noPause = parseInt(msg[2]);
       var sleeping = parseInt(msg[3]);
       var data = [
          {label: "Pause", data:pause},
          {label: "No Pause", data:noPause},
          {label: "Sleeping", data:sleeping}
       ];
   var options = {
        series: {
            pie: {show: true}
        },
        legend: {
            show: false
        }
     };
    $.plot($("#pie-placeholder"), data, options);
}

}；

HTML是

<div id="live-placeholder" class="flot"></div>

所有必需的js库都包含在内。我做错了什么？有什么帮助吗？

感谢

您有两个问题：

1.）您的占位符div id与$.plot调用不匹配。live-placeholder != pie-placeholder。

2.）你不需要自己计算百分比。Flot会在内部完成。

在这里看到一把正在工作的小提琴。

相关文章：