Question

我想绘制太阳落山的时间。这是我的代码：

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”的时间？

我看到了一个针对气泡图执行此操作的示例，但是我无法在折线图中使用该解决方案。

Answer 1

根据注释中指定的example，下面是带有图表的StackBlitz。

一些修改：

我发现将hh:mm数据转换为分钟数更方便

var sunsetHours = ['20:18', '20:18', '20:15'].map(hour => {
  var hourMinutes = hour.split(':');
  var minutes = parseInt(hourMinutes[0]) * 60 + parseInt(hourMinutes[1]);
  return minutes;
});

为实现与注释示例相似的功能，下面的代码为yAxis（每分钟）创建了 ~~1440~~ 1441个可能的标签。 getHourString（）函数将分钟转换为标签（例如121变为02:01）

var yLabels = [];
var stepMinutes = 60;
for (var minute = 0; minute <= 1440; minute += 1) {
  yLabels.push(getHourString(minute));
}

/* removed fragment */

function getHourString(minute) {
  var hours = Math.floor(minute / 60);
  var minutes = minute % 60;
  return `${Math.floor(hours / 10) > 0 ? hours : "0" + hours}:${Math.floor(minutes / 10) > 0 ? minutes : "0" + minutes}`;
}

作为奖励，我还添加了自定义tooltip，因此，当您将鼠标悬停在该点上时，它将获得20:18而不是1218

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => {
      // console.log(tooltipItem);
      return yLabels[tooltipItem.yLabel];
    }
  }
}

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

backgroundColor: ['rgba(255, 99, 132, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)'],

对此

backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',

Answer 2

最棘手的部分是日期解析和格式化。但是，如果操作正确，它会非常强大。

您可以在我的JSBin中找到完整的示例。

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

在Y轴上绘制时间

2 个答案: