Highcharts XRange图表适配MySQL日期格式解决方案咨询

没问题，我来帮你搞定这个格式转换的事儿！Highcharts的XRange图表要求时间轴数据是毫秒级的UTC时间戳，而你从MySQL拿到的是字符串格式的日期，只需要把这些字符串转成时间戳就行，给你两种常用的解决方案：

方案一：前端JavaScript处理（推荐，无需修改后端） #

拿到JSON数据后，遍历每个数据项，把x和x2的字符串日期转成时间戳即可。直接上代码：

// 假设你已经通过AJAX获取到了后端返回的data数组
const chartData = [{"y":1,"x":"2018-01-19 08:10:57","x2":"2018-01-19 10:18:04"}, {"y":3,"x":"2018-01-19 07:39:55","x2":"2018-01-19 08:21:01"}, {"y":2,"x":"2018-01-19 13:06:46","x2":"2018-01-19 14:30:49"}, {"y":4,"x":"2018-01-19 10:23:44","x2":"2018-01-19 11:54:48"}, {"y":2,"x":"2018-01-19 08:10:05","x2":"2018-01-19 09:15:12"}, {"y":4,"x":"2018-01-19 09:00:16","x2":"2018-01-19 10:03:20"}, {"y":4,"x":"2018-01-19 08:10:49","x2":"2018-01-19 08:50:53"}, {"y":5,"x":"2018-01-19 08:07:15","x2":"2018-01-19 09:04:21"}, {"y":3,"x":"2018-01-19 08:30:22","x2":"2018-01-19 09:28:25"}];

// 遍历转换日期格式
chartData.forEach(item => {
  // 将字符串日期转为UTC毫秒时间戳，和官方Demo的格式匹配
  item.x = new Date(item.x).getTime();
  item.x2 = new Date(item.x2).getTime();
});

// 初始化XRange图表
Highcharts.chart('container', {
  chart: {
    type: 'xrange'
  },
  xAxis: {
    type: 'datetime',
    utc: true, // 开启UTC模式，和官方Demo保持一致
    title: {
      text: '时间'
    }
  },
  yAxis: {
    categories: ['任务组1', '任务组2', '任务组3', '任务组4', '任务组5'], // 对应y值1-5，按需自定义
    title: {
      text: '任务分组'
    }
  },
  series: [{
    name: '任务执行时长',
    data: chartData
  }]
});

为什么这么做？ #

Highcharts的datetime类型坐标轴只认毫秒级时间戳，而new Date(日期字符串).getTime()会返回UTC标准的毫秒数，刚好符合官方Demo的要求，开启utc: true后图表会正确渲染时间轴。

方案二：后端处理（以PHP为例） #

如果你不想在前端处理，也可以在从MySQL取数据的时候直接转成时间戳，前端拿到就能直接用：

// 假设从MySQL查询得到$rawData数组
$processedData = [];
foreach ($rawData as $item) {
  $processedData[] = [
    'y' => $item['y'],
    // strtotime返回秒级时间戳，乘以1000转成毫秒
    'x' => strtotime($item['x']) * 1000,
    'x2' => strtotime($item['x2']) * 1000
  ];
}

// 输出处理后的JSON
echo json_encode($processedData);

注意事项 #

• 你给出的2018-01-19 08:10:57这种日期格式，JavaScript的Date对象可以直接解析，不用担心格式兼容问题。
• 如果遇到时区偏差问题，确保后端返回的日期是UTC时间，或者前端开启utc: true即可统一时间标准。

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