Chart.js Y轴上的绘图时间

我想画太阳落山的时间。这是我的密码：

var ctxIndex = document.getElementById('sunset');
var myChart = new Chart(ctxIndex, {
    type: 'line',
    data: {
        labels: ['19.09.19', '21.09.19', '22.09.19'],
        datasets: [{
            label: 'Sunset',
            data: ['20:18', '20:18', '20:15'],
            backgroundColor: ['rgba(255, 99, 132, 0.2)'],
            borderColor: ['rgba(255, 99, 132, 1)'],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

如何配置chart.js在Y轴上显示“20:18”的时间

我见过一个气泡图的例子，但我无法在折线图中使用该解决方案。

根据注释中指定的，下面是图表的示例

有几点建议：

• 我发现将

  hh:mm

  数据转换为分钟更方便

var sunsetHours=['20:18'，'20:18'，'20:15'].地图（小时=>{
var hourMinutes=hour.split（“：”）；
var minutes=parseInt（hourMinutes[0]）*60+parseInt（hourMinutes[1]）；
返回分钟数；
});

• 为了实现类似于注释示例的效果，下面的代码为yAxis创建1440 1441个可能的标签（每分钟一个）。函数的作用是：将分钟转换成标签（例如，

  121

  变成

  02:01

  ）

var yLabels=[]；
var stepMinutes=60；
对于（var minute=0；minute 0？hours:${Math.floor（minutes/10）>0？minutes:$0+minutes}`；
}

• 作为奖励，我还添加了自定义，这样当您将鼠标悬停在点上时，它将得到

  20:18

  ，而不是

  1218

工具提示：{
回调：{
标签：（工具提示项，数据）=>{
//console.log（工具提示项）；
返回yLabel[tooltipItem.yLabel]；
}
}
}

• 我也注意到只有第一个点是红色的，所以我改变了这个

backgroundColor:['rgba（255,99,132,0.2）]，
边框颜色：['rgba（255,99,132,1）'，

对此

backgroundColor:'rgba（255,99,132,0.2）'，
边框颜色：“rgba（255,99,132,1）”，

最棘手的部分是日期解析和格式化。但是如果你做得好，它会非常强大

你可以在我的文章中找到完整的例子

让sData={}
sData.label=['19.09.19'，'21.09.19'，'22.09.19']
sData.time=['20:18'，'20:18'，'20:15']
让chartData={}
chartData.label=parseDate（sData.label）
chartData.time=parseTime（sData.time）
函数解析日期（日期）{
让parsedDates=[]
for（设x=0；x

你能发布一个链接或气泡图示例的代码吗？谢谢！好的，我刚刚意识到这个问题是针对angular的，而不是针对chart.js的。但是这里的链接是：你必须在yAxes选项中添加

键入：'time

。你可以找到许多关于时间属性的其他问题和答案。非常感谢！这就像一个符咒：-）你也很好地解决了问题，只有第一点是红色。因为我正在使用Laravel并格式化数据，然后再将其发送到视图中作为“20:18”、“20:15”，所以我正在考虑使用PHP进行第一次计算，所以我只需要绘制数据。@cYnd Btw是否希望xAxis具有时间刻度（我不确定，因为你的问题和代码中没有写任何关于这方面的内容）？这就是我的代码所关注的。如果没有，那么卡斯普顿的答案会越来越简单。时间尺度是可选的，但仍然很好。因为我只能将一条注释标记为答案，所以我将使用卡斯普顿的答案，因为它越来越简单；-）

let sData = {}
sData.label = ['19.09.19', '21.09.19', '22.09.19']
sData.time = ['20:18', '20:18', '20:15']

let chartData = {}
chartData.label = parseDate(sData.label)
chartData.time = parseTime(sData.time)

function parseDate(dates){
  let parsedDates = []
  for (let x = 0; x < dates.length; x++) {
    parsedDates.push(moment(dates[x], "DD.MM.YYYY").format('YYYY-MM-DD'))
  }
  return parsedDates
}

function parseTime(times){
  let parsedTime = []
  for (let x = 0; x < times.length; x++) {
    let words = times[x].split(':')
    parsedTime.push(parseInt(words[0])*60 + parseInt(words[1]))   
  }
  return parsedTime
}

let ctx = document.getElementById('chart');

let time_data = {
  labels: chartData.label,
  datasets: [{
    label: 'Sunset',
    data: chartData.time,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgba(255, 99, 132, 1)',
    borderWidth: 1
  }]
};

let time_options = {
  responsive: true,
  title: {
    display: true,
    text: 'Sunset'
  },
  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
      },
      title: function(tooltipItem, data){
        let label = tooltipItem[0].label
        console.log(label)
        console.log(moment(label).format('DD.MM.YYYY'))
        return moment(label).format('DD.MM.YYYY')
      }
    },
    displayColors: false
  },
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        minUnit: 'day',
        unitStepSize: 1,
        displayFormats: {
          day: 'DD.MM.' 
        }
      }
    }],
    yAxes: [{
      ticks: {
        //min: 0,
        //max: 1440,
        precision: 0,
        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 chart = new Chart(ctx, {
  type: "line",
  data: time_data,
  options: time_options
});