jQuery Flot 饼图不显示

标签 jquery css flot

我正在尝试使用 Flot 制作饼图,但我的饼图不会显示。

这是我的代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

  <link rel="stylesheet" type="text/css" href="style.css">
<head>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.flot.js"></script>
    <script type="text/javascript">
    $( function() {

     var data = [
    {label: "Pause", data:150},
    {label: "No Pause", data:100},
    {label: "Sleeping", data:250}
];
var options = {
    series: {
        pie: {show: true}
    },
    legend: {
        show: false
    }
};

$.plot($("#pie-placeholder"), data, options);


    });
    </script>
</head>
<body>
<div id="pie-placeholder" class="flot"></div>
</body>
</html>

还有我的 CSS 文件:

.flot {
    width: 500px;
    height: 500px;
}

没有什么特别难的,但饼图不会出现。

这是我的图表现在的样子:

enter image description here

我没有任何错误,所以我不明白哪里出了问题。

你能帮帮我吗?

谢谢!

最佳答案

您需要包含 pie plugin .

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.pie.js"></script>

演示 JSFiddle .

我看到你在包装你的代码

$( function () {
    // your code
} );

尽管我不确定您为什么将匿名函数传递给 jQuery。尽管代码仍会运行,但我会删除它,或者如果您尝试执行 IIFE ( immediately invoked function expression ) 我会执行以下操作:

( function () {
    // your code
} )();

关于jQuery Flot 饼图不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37415304/

相关文章:

jquery - 把它变成一个jquery函数?

jquery - 具有验证和多表单处理的 Django Ajax 提交

javascript - 使用 JavaScript 函数作为网页的起点

动态浮图图 - 通过单击图上的图例文本或框来显示隐藏系列

jquery - 从流程图中获取数据系列的颜色

javascript - textarea 字体大小在使用 jquery 调整屏幕大小时不改变

jquery - 更改连续动画

jquery - 如何在横幅前设置图片?

html - 如何将幻灯片指示器放在左上角

resources - 使用 JSFiddle 加载 JS Flot 外部资源