Question

我正在尝试在我的html中引用外部js文件，如下所示，我是否错过了什么？饼图应该出现，但我没有得到它。 https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_src

＆＃13;

<script src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>

<div><span class="pie">1/5</span></div>

＆＃13;

Answer 1

您的代码有4个主要问题：

您没有在HTML文档<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>中调用jQuery，必须在插件之前调用
您调用了两次插件：缩小版本和非缩小版本（如果可用，请求缩小版本，因为它更轻）
您申请了HTTP以上的插件，而不是总是更好的HTTPS
您没有使用$(".pie").peity("pie")

这是一个工作片段。

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://benpickles.github.io/peity/jquery.peity.min.js"></script>
</head>

<body>

<div>
  <span class="pie">1/5</span>
  <span class="pie">226/360</span>
  <span class="pie">0.52/1.561</span>
  <span class="pie">1,4</span>
  <span class="pie">226,134</span>
  <span class="pie">0.52,1.041</span>
  <span class="pie">1,2,3,2,2</span>
</div>

  <script>
    $(document).ready(function() {
      $(".pie").peity("pie");
    });  
  </script>

</body>
</html>

Answer 2

好像你错过了JavaScript代码段 1.加载订单应该改变，

<html>
  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="http://benpickles.github.io/peity/jquery.peity.js"></script>
    <script type="text/javascript">
  $(document).ready(function() {
    $("span.pie").peity("pie");
  });
    </script>
  </head>
  <body>
<div><span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span></div>
 <body>
</html>

Answer 3

您的代码中有三项更改。

你需要包含jQuery。
您需要拨打peity()上的span功能。
您无需同时包含jquery.peity.js和jquery.peity.min.js。包括其中任何一个就足够了。

见下面的代码。

＆＃13;

$(document).ready(function() {
  $("span.pie").peity("pie");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>

<div><span class="pie">1/5</span></div>

＆＃13;

Answer 4

除了其他答案之外，您的Dojo代码段还不起作用，因为您正在尝试通过HTTP从通过HTTPS提供的页面加载Peity插件。 Your web browser console会告诉您浏览器阻止从HTTPS页面加载mixed content。

从peity.js加载https://benpickles.github.io/peity/jquery.peity.js。但是，当您发布站点时，请下载peity.min.js并将其托管在您自己的服务器上。 Github is not a CDN.

引用html

4 个答案: