如何在Char JS中对标签进行分组

Question

您好，我在使用Chart JS时遇到问题。我想在图表中显示分组标签，在其他问题中看到另一个问题，但是现在我不知道如何实现我的项目。示例：在我的图表中显示数据7:00，7:01，7:02，7:03，7:04但我只想7：00、8：00，如果您不偷偷看我的照片

我想要这样

我的JS

function tampilChart(data,labels){
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx,{
      type:'line',
      data:{
        labels:labels,
        datasets : [{
          label:'Harga',
          backgroundColor:'rgba(54, 162, 235, 0.2)',
          borderColor:'rgba(54, 162, 235, 1)',
          data:data
        }],
      },
      options:{
        scales:{
          yAxes:[{
            ticks:{
              beginAtZero:true
            }
          }]
        }
      },
    });
}
isiChart();
function isiChart(){
      $.ajax({
        url:"http://localhost/topsis/admin/Menu/tampilChart",
        type:'post',
        dataType:'json',
        success:function(data){
            var nilai =[];
            var label=[];
            for(var i=0;i<data.length;i++){
                label[i]=data[i].hari;
                nilai[i] = data[i].harga;
            }
            tampilChart(nilai,label);
        }
      });
    }

我的JSON

{“ harga”：17.79708432356102，“ hari”：“ 2020-03-23 08:32:45”}，{“ harga”：17.591260378595486，“ hari”：“ 2020-03-23 08:38:49” }，{“ harga”：17.61026854797192，“ hari”：“ 2020-03-23 08:42:55”}，{“ harga”：17.80475850892087，“ hari”：“ 2020-03-23 08:46:09” }，{“ harga”：17.400984669807688，“ hari”：“ 2020-03-23 08:53:59”}，{“ harga”：17.46294725519658，“ hari”：“ 2020-03-23 08:59:48” }，{“ harga”：17.474364994815666，“ hari”：“ 2020-03-23 09:04:57”}，{“ harga”：17.66738555493817，“ hari”：“ 2020-03-23 09:09:21” }，{“ harga”：17.16010419143489，“ hari”：“ 2020-03-23 09:15:50”}，{“ harga”：17.59928014323995，“ hari”：“ 2020-03-23 09:20:37” }，{“ harga”：17.286875855560602，“ hari”：“ 2020-03-23 09:29:02”}，{“ harga”：17.146187228413567，“ hari”：“ 2020-03-23 09:35:12” }，{“ harga”：17.38490758256079，“ hari”：“ 2020-03-23 09:39:03”}，{“ harga”：17.15664324821635，“ hari”：“ 2020-03-23 09:44:28” }，{“ harga”：17.192637780118307，“ hari”：“ 2020-03-23 09:49:15”}，{“ harga”：17.62267025376745，“ hari”：“ 2020-03-23 09:54:10” }，{“ harga”：17.723818283548656，“ hari”：“ 2020-03-23 09:59:53”}，{“ harga”：17.7186096456 4134，“ hari”：“ 2020-03-23 10:04:00”}，{“ harga”：17.73204012352615，“ hari”：“ 2020-03-23 10:09:24”}，{“ harga”： 17.768559437846704，“ hari”：“ 2020-03-23 10:11:15”}，{“ harga”：17.993312941638735，“ hari”：“ 2020-03-23 10:20:26”}，{“ harga”： 18.103742695096674，“ hari”：“ 2020-03-23 10:25:02”}，{“ harga”：18.1144523202333，“ hari”：“ 2020-03-23 10:28:55”}，{“ harga”： 18.104201546453393，“ hari”：“ 2020-03-23 10:32:38”}，

Answer 1

使用time轴类型：

options: {
  scales: {
    xAxes: [{
      type: "time",
      time: {
        unit: "hour",
        displayFormats: {
          hour: "HH:mm"
        }
      }
    }]
  }
}

请确保使用'bundled build' of Chart.js，或包含moment.js 之前 Chart.js。