C3js时间解析失败求助：基于时分秒时间戳绘制概率图表

Hey there, let's work through your two key issues: getting those time strings parsed into valid Date objects, and setting up that probability chart with the exact Y-axis you need. I'll break this down into actionable steps.

1. Fixing Time String Parsing #

The problem with using new Date("12:03:55") directly is that browser/JS engine support for pure HH:mm:ss strings is inconsistent—often leading to Invalid Date errors. Instead, manually parse the time components and build a reliable Date object (or convert to a numeric timestamp for charting).

Option 1: Parse to a Full Date Object (based on today) #

This creates a Date object for the given time on the current day, which works great for charting time-of-day data:

function parseTimeToDate(timeStr) {
  // Split the string into hours, minutes, seconds
  const [hours, minutes, seconds] = timeStr.split(':').map(Number);
  const today = new Date();
  // Set the time components, reset milliseconds to 0
  today.setHours(hours, minutes, seconds, 0);
  return today;
}

// Convert your arr5 array to valid Date objects
const validDates = arr5.map(timeStr => parseTimeToDate(timeStr));

Option 2: Convert to Milliseconds in a Day #

If you don't need a full Date object (just a numeric value for charting), convert the time to total milliseconds since midnight:

function timeToMilliseconds(timeStr) {
  const [h, m, s] = timeStr.split(':').map(Number);
  return h * 3600000 + m * 60000 + s * 1000;
}

const timeMsValues = arr5.map(timeToMilliseconds);

2. Building the Probability Chart (Using Chart.js) #

Assuming you're using Chart.js (a popular, flexible library), here's a complete example that sets up the Y-axis with your required range (0 to 1, step 0.2) and uses your parsed time data:

<canvas id="probabilityChart" width="800" height="400"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // Your existing data
  const arr1 = [0.2, 0.5, 0.8, 0.3, 1.0];
  const arr5 = ["08:15:00", "12:03:55", "14:45:20", "18:30:10", "22:10:05"];

  // Parse time strings to Date objects
  function parseTimeToDate(timeStr) {
    const [hours, minutes, seconds] = timeStr.split(':').map(Number);
    const today = new Date();
    today.setHours(hours, minutes, seconds, 0);
    return today;
  }
  const validDates = arr5.map(parseTimeToDate);

  // Initialize the chart
  const ctx = document.getElementById('probabilityChart').getContext('2d');
  new Chart(ctx, {
    type: 'line', // Switch to 'bar' if you prefer bar charts
    data: {
      labels: validDates,
      datasets: [{
        label: 'Event Probability',
        data: arr1,
        borderColor: '#2ecc71',
        backgroundColor: 'rgba(46, 204, 113, 0.1)',
        tension: 0.2,
        fill: true
      }]
    },
    options: {
      scales: {
        y: {
          min: 0,
          max: 1,
          stepSize: 0.2,
          title: {
            display: true,
            text: 'Probability'
          },
          ticks: {
            callback: function(value) {
              return value.toFixed(1); // Ensure labels show 0, 0.2, 0.4, etc.
            }
          }
        },
        x: {
          type: 'time',
          time: {
            unit: 'second', // Adjust to 'minute' if your data is less granular
            displayFormats: {
              second: 'HH:mm:ss' // Show time in HH:mm:ss format on X-axis
            }
          },
          title: {
            display: true,
            text: 'Time'
          }
        }
      }
    }
  });
</script>

Notes for Other Chart Libraries #

If you're using D3.js or another library, the core logic stays the same:

• First convert your arr5 time strings into a format the library can understand (Date objects or numeric timestamps)
• Configure the Y-axis to have a minimum of 0, maximum of 1, and step size of 0.2

If you run into edge cases (like invalid time strings in arr5) or need tweaks for a specific library, feel free to share more details!

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