Php 使用带有时间数据的图表js的折线图

我正在使用

chartJs

创建一个折线图，方法是在

X轴传递日期，在
Y轴传递时间（mm:ss）。我不知道如何将
chartJs
与时间值一起使用。我尝试了堆栈中的不同解决方案，但在我的情况下没有一个有效

这里是json文件

{"label":["08-Aug-2019","11-Aug-2019","22-Aug-2019","25-Aug-2019"],"time":["1:08","1:44","2:27","1:02"],"chart_data":"{\"label\":[\"08-Aug-2019\",\"11-Aug-2019\",\"22-Aug-2019\",\"25-Aug-2019\"],\"time\":[\"1:08\",\"1:44\",\"2:27\",\"1:02\"]}"}

以下是我试图编写的代码

<div id="time_chart"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script>
    let sData = JSON.parse('<?php echo $chart_data; ?>');
    let time_ctx = $("#time-chart");

    //Line Chart
      var time_data = {
        labels: sData.label,
        datasets: [
          {
            label: sData.label,
            data: sData.time
          }
        ]
      };

      //options line chart
      var time_options = {
        responsive: true,
        title: {
          display: false
        },
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            type: 'time',
            time: {
              parser: 'm:s',
              unit: 'minute',
              unitStepSize: 2,
              min: '0:0',
              max: '30:00',
              displayFormats: {
                'seconds': 'm.s'
              }
            },
            ticks: {
              callback: function(value, index, values) {

                //Ticks reverse does not work with time axes so we have to revert in this callback
                if (values[values.length - index] != undefined) {
                   return moment(values[values.length - index].value).format('m.s');
                }
              }
            }
          }]
        }
      };

      var chart2 = new Chart(time_ctx, {
        type: "line",
        data: time_data,
        options: time_options
      });

</script>


让sData=JSON.parse（“”）；
让time_ctx=$（“#时间图表”）；
//折线图
变量时间_数据={
标签：sData.label，
数据集：[
{
标签：sData.label，
数据：sData.time
}
]
};
//选项折线图
变量时间_选项={
回答：是的，
标题：{
显示：假
},
图例：{
显示：假
},
比例：{
雅克斯：[{
键入：“时间”，
时间：{
解析器：“m:s”，
单位：分钟，
单位步长：2，
最小值：“0:0”，
马克斯：“30:00”，
显示格式：{
“秒”：“m.s”
}
},
滴答声：{
回调：函数（值、索引、值）{
//Ticks reverse不适用于时间轴，因此我们必须在此回调中还原
if（值[values.length-index]！=未定义）{
返回力矩（值[values.length-index].value）.format（'m.s'）；
}
}
}
}]
}
};
var chart2=新图表（时间{
键入：“行”，
数据：时间数据，
选项：时间选项
});

这就是我用这段代码得到的结果：

尽管我没有为x轴和y轴都使用时间轴，但我还是设法创建了一个带有定时x轴和线性y轴的变通方法。
我解析您的时间并以秒为单位返回时间（整数）。我使用此值显示您的时间，并将格式更改回mm:ss。
我希望这就是你想要的。我不确定您是否想要这样的轴（因为在您的代码中，您使用y轴作为类型“time”）

PS：我的第一篇文章，请随时告诉我可以改进的地方

JSFiddle：

JSBin：

让sData={}
sData.label=[“2019年8月8日”、“2019年8月11日”、“2019年8月22日”、“2019年8月25日”]
sData.time=[“1:08”、“1:44”、“2:27”、“1:02”]
让chartData={}
chartData.label=sData.label
chartData.time=parseTimeToSeconds（sData.time）
函数parseTimeToSeconds（次）{
设正则表达式=/（\d*）：（\d{2}）/gm
让parsedTime=[]
for（设x=0；x

let sData = {}
sData.label = ["08-Aug-2019","11-Aug-2019","22-Aug-2019","25-Aug-2019"]
sData.time = ["1:08","1:44","2:27","1:02"]

let chartData = {}
chartData.label = sData.label
chartData.time = parseTimeToSeconds(sData.time)

function parseTimeToSeconds(times){
  let regex = /(\d*):(\d{2})/gm
  let parsedTime = []

  for (let x = 0; x < times.length; x++) {
    let match = regex.exec(times)
    parsedTime.push(parseInt(match[1])*60 + parseInt(match[2]))
  }
  return parsedTime
}

let time_ctx = document.getElementById('time_chart');

let time_data = {
  labels: chartData.label,
  datasets: [{
    label: chartData.label,
    data: chartData.time
  }]
};

let time_options = {
  responsive: true,
  title: {
    display: false
  },
  legend: {
    display: false
  },
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data){
        let value = parseInt(tooltipItem.value)
        if (value%60 < 10)
          return Math.floor(value/60) + ":" + 0 + value%60
        else
          return Math.floor(value/60) + ":" + value%60
      }
    }
  },
  scales: {
    xAxes: [{
      type: 'time'
    }],
    yAxes: [{
      ticks: {
        min: 0,
        max: 1800,
        stepSize: 120,
        callback: function(value, index, values) {
          if (value%60 < 10)
            return Math.floor(value/60) + ":" + 0 + value%60
          else 
            return Math.floor(value/60) + ":" + value%60
        }
      }      
    }]
  }
};

let chart2 = new Chart(time_ctx, {
  type: "line",
  data: time_data,
  options: time_options
});