如何使用Highcharts与JavaScript绘制基于表格的时分(hh:mm)饼图

没问题，我来帮你搞定这个需求！要绘制带hh:mm格式时长数据的饼图，核心是先把时间字符串转换成可计算的数值（比如总分钟数）——因为Highcharts的饼图需要数值型数据来计算占比，之后再把数值转回时分格式，显示在 tooltip、图例或者数据标签里就可以了。

步骤1：准备数据并转换格式 #

首先，我们先把你提供的表格数据整理成原始数组，然后写两个工具函数来处理时间格式的转换：

• timeToMinutes()：把hh:mm转成总分钟数（饼图计算用）
• minutesToTime()：把总分钟数转回hh:mm格式（显示用）

完整代码示例 #

<!-- 先引入Highcharts的CDN -->
<script src="https://code.highcharts.com/highcharts.js"></script>

<!-- 饼图容器 -->
<div id="timePieChart" style="width: 600px; height: 400px;"></div>

<script>
// 工具函数：hh:mm 转 总分钟数
function timeToMinutes(timeStr) {
  const [hours, minutes] = timeStr.split(':').map(Number);
  return hours * 60 + minutes;
}

// 工具函数：总分钟数 转 hh:mm 格式
function minutesToTime(totalMinutes) {
  const hours = Math.floor(totalMinutes / 60);
  const minutes = totalMinutes % 60;
  // 补零确保两位数格式
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
}

// 原始数据（对应你提供的表格）
const rawData = [
  { task: 'Task 1', time: '00:30' },
  { task: 'Task 2', time: '01:00' },
  { task: 'Task 3', time: '00:15' },
  { task: 'Task 4', time: '02:15' }
];

// 转换为Highcharts需要的数据格式：name是任务名，y是总分钟数，同时存原始时间用于显示
const chartData = rawData.map(item => ({
  name: item.task,
  y: timeToMinutes(item.time),
  time: item.time // 存原始时间，或者也可以用y值后期转换
}));

// 初始化饼图
Highcharts.chart('timePieChart', {
  chart: {
    type: 'pie'
  },
  title: {
    text: '任务耗时占比'
  },
  tooltip: {
    // 自定义tooltip内容：显示任务名、时长、占比
    formatter: function() {
      return `<b>${this.point.name}</b><br/>
              时长: ${minutesToTime(this.point.y)}<br/>
              占比: ${this.percentage.toFixed(1)}%`;
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        // 数据标签显示任务名和时长
        formatter: function() {
          return `${this.point.name}: ${minutesToTime(this.point.y)}`;
        }
      }
    }
  },
  series: [{
    name: '耗时',
    colorByPoint: true,
    data: chartData
  }]
});
</script>

关键部分解释 #

1. 数据转换：通过两个工具函数实现时间和数值的双向转换，既满足Highcharts的数值计算需求，又能在前端显示用户熟悉的hh:mm格式。
2. Tooltip自定义：利用formatter函数，把原始的分钟数转回时分格式，同时展示占比信息，让用户一目了然。
3. 数据标签配置：在饼图的每个扇区上直接显示任务名和对应的时长，提升图表的可读性。

你可以根据实际需求调整图表的尺寸、颜色、标题等配置，也可以扩展数据处理逻辑（比如处理异常的时间格式）。

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