网页旋钮饼图无法显示问题及项目倒计时饼图实现需求求助

Hey there! Let's tackle your two pie chart issues one by one to get everything working smoothly.

First, let's troubleshoot why your knob pie chart isn't rendering. Based on the code snippet you shared, here are the most likely fixes:

• Fix the truncated image path: Your htmlinit string cuts off at /resources/ajax-l... — make sure the full image filename (like ajax-loader.gif) is included and the path matches where your resource is stored on the server. Double-check for case sensitivity (e.g., Resources vs resources in URLs).
• Ensure jQuery loads correctly: Open your browser's dev tools (F12) and run $ in the console. If it returns function, jQuery is loaded; if not, verify the path to jquery-1.11.3.js is correct.
• Insert the HTML into the DOM: Your current code defines htmlinit but doesn't add it to the page. Add a line like $("#your-target-element-id").html(htmlinit); where your-target-element-id is the ID of the container where you want the pie chart to appear.

Example of the fixed initialization code:

$(function () {
  var htmlinit = "<img id='customloader' src='/resources/ajax-loader.gif' alt='Knob Pie Chart'>";
  $("#knob-chart-container").html(htmlinit); // Replace with your actual container ID
});

To create countdown pie charts that show remaining time until your projects launch, we'll use a combination of jQuery for time calculations and CSS for the pie visualization (no external libraries needed). Here's a complete, working implementation:

Step 1: Add HTML Structure #

First, set up containers for each project's countdown:

<div class="project-tracker">
  <h3><strong>项目A</strong></h3>
  <div class="countdown-pie" data-launch-date="2024-10-22"></div>
  <p class="remaining-time"></p>
</div>
<div class="project-tracker">
  <h3><strong>项目B</strong></h3>
  <div class="countdown-pie" data-launch-date="2024-11-15"></div>
  <p class="remaining-time"></p>
</div>

Step 2: Add CSS for Pie Charts #

Use CSS conic gradients to create the pie chart visual:

.project-tracker {
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 15px;
}
.countdown-pie {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
}
.countdown-pie::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #333;
}

Step 3: Full JavaScript Implementation #

This code calculates remaining time, updates the pie chart percentage, and refreshes the display:

<script src="/Resources/jquery-1.11.3.js"></script>
<script>
$(function () {
  // Calculate and format remaining time into weeks/months/days
  function getRemainingTime(launchDate) {
    const now = new Date();
    const launch = new Date(launchDate);
    const timeDiff = launch - now;

    if (timeDiff <= 0) return "已启动";

    const totalDays = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    const weeks = Math.floor(totalDays / 7);
    const days = totalDays % 7;
    const months = Math.floor(weeks / 4); // Approximate 4 weeks per month
    const remainingWeeks = weeks % 4;

    let timeString = "";
    if (months > 0) timeString += `${months}个月`;
    if (remainingWeeks > 0) timeString += `${remainingWeeks}周`;
    if (days > 0 && months === 0) timeString += `${days}天`; // Omit days if months are shown

    return timeString.trim() || "即将启动";
  }

  // Update the pie chart based on remaining time vs total project duration
  function updatePieChart($pie, launchDate) {
    const now = new Date();
    const launch = new Date(launchDate);
    // Adjust totalDurationMs to match your project's full timeline (example: 3 months = 7776000000ms)
    const totalDurationMs = 7776000000;
    const remainingMs = Math.max(launch - now, 0);
    const completionPercent = Math.min((remainingMs / totalDurationMs) * 100, 100);

    $pie.css('background', `conic-gradient(#2563eb ${completionPercent}%, #e2e8f0 0%)`);
    $pie.find('::before').text(`${Math.round(completionPercent)}%`);
  }

  // Initialize all countdowns
  $('.countdown-pie').each(function() {
    const $pie = $(this);
    const launchDate = $pie.data('launch-date');
    const $timeDisplay = $pie.siblings('.remaining-time');

    // Initial render
    $timeDisplay.text(`将于${getRemainingTime(launchDate)}后启动`);
    updatePieChart($pie, launchDate);

    // Refresh every minute (adjust interval as needed)
    setInterval(() => {
      $timeDisplay.text(`将于${getRemainingTime(launchDate)}后启动`);
      updatePieChart($pie, launchDate);
    }, 60000);
  });
});
</script>

Key Notes: #

• Replace the data-launch-date values with your actual project launch dates (YYYY-MM-DD format).
• Adjust totalDurationMs to match your project's full timeline (e.g., 2 months = 5184000000ms) for accurate pie chart percentages.
• The refresh interval is set to 1 minute to avoid excessive browser load; you can change it to 1 second (1000ms) if you need real-time updates.

内容的提问来源于stack exchange，提问作者John John