javascript - 使用 float 绘制饼图

标签 javascript jquery flot

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

无法使用 Canvas 内包含的标签绘制饼图

我的代码是

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 调用不匹配。 实时占位符!=饼图占位符

2.) 您不需要自己计算百分比。 Flot 将在内部完成此操作。

查看工作 fiddle here .

关于javascript - 使用 float 绘制饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17999137/

相关文章:

javascript - 使用 Angular.js 在每一行中为数据表 jQuery 添加一个复选框

javascript - 更改表中选定的选项

javascript - 如何在 codeigniter 中验证登录弹出模式

javascript - 在 Chart.js v 2.7.1 中的条形图顶部显示数据

javascript - Flot:无法去除点阴影

javascript - jQuery Flot - 四舍五入 x 轴值?

javascript - 数字样式值的 html/javascript 精度

javascript - jQuery selectize 选择删除并添加按钮单击选项

javascript - 我正在尝试获取完整的世界地图,而无需使用 gmaps 重复自动调整为 div

javascript - 如何在 Flot 中填充折线图而不将 y 轴强制为零?