时间戳

首页 > 解决方案 > 使用带有时间数据的 Chart js 的折线图

php - 使用带有时间数据的 Chart js 的折线图

问题描述

我正在创建一个折线图，方法是通过在和时间 (mm:ss)chartJs传递日期。我不确定如何使用时间值。我尝试了堆栈中的不同解决方案，但在我的情况下都没有。X-AxisY-AxischartJs

这是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>

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

图片

标签： phpcodeigniterchart.js

解决方案

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

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

JSFiddle：https ://jsfiddle.net/5837nmyo/

JSBin：https ://jsbin.com/yadixolica/1/edit?html,js,output

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
});

推荐阅读