Question

我试图在ChartJS折线图中显示有关设备活动间隔的数据。数据必须显示设备处于活动状态的行。图表的x轴值是静态的，因此直线是直的，y轴值是日期字符串（从unix时间戳转换）。

我已经为这个问题踢了好几天，但是我在图表中显示的只是一堆灰线，但是控制台中没有错误。

我从服务器获取的数据（第一个时间戳是活动开始，下一个活动结束）：

[1565672359,1565676262,1565676379,1565676871,1565677027,1565679609,1565680482,1565683483,1565683584,1565688360,1565688423,1565688480,1565690500,1565697516,1565698456,1565698613,1565698832,1565702513,1565702954,1565704322]

从服务器获取数据后，我将其准备为如下所示的图表：


var dataArr = [];

// initial y-axis labels
dataArr['labels'] = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00',
'13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00'];

for (var i = 0; i < dataArr['labels'].length; i++) {

  // getting YYYY-MM-DD string from timestamp                
  var date = new Date(data.activity[0].first.ts*1000).toISOString().substring(0, 10);

  date = date + ' ' + dataArr['labels'][i];
  // create Date object
  date = moment( date, "YYYY-MM-DD HH:mm").toDate();
  // override y-axis label with Date object
  dataArr['labels'][i] = date;

}

dataArr['datasets'] = [];

// initialize datasets 
dataArr['datasets'][0] = {
 data: [],
 borderColor: "#fcc468",
 backgroundColor: "#fcc468",
 borderWidth: 3,
 label: "Status",
 fill: false, 
 pointRadius: 0,
 pointHoverRadius: 0,
 spanGaps: false,
};

// looping trough data returned from server (see above) and inserting data in data array for chart               
for (var i = 0; i < data.arr.length; i++) { 

 dataArr['datasets'][0].data.push({
  x : 0.5,
  y : moment.unix( data.arr[i] ).format("YYYY-MM-DD HH:mm")
 }); 
}

准备好数据后，我在绘制图表的地方调用函数，将dataArr数组作为参数传递给它，如下所示：

https://imgur.com/a/CWhKxzr

图表声明和绘图：

chartColor = "#FFFFFF";
ctx = document.getElementById('activity-data').getContext("2d");

var yAxisLabels = {
   '0' : '',
   '1' : ''
};

myChart = new Chart(ctx, {
  type: 'line',
  data: data, // dataArr passed as argument
      options: {
        legend: {
          display: false
        },

        tooltips: {
          enabled: true,
          mode: 'single'  
        },

        scales: {

          yAxes: [{

            ticks: {
              fontColor: "#9f9f9f",
              beginAtZero: true,
              min: 0,
              max: 1,
              stepSize: 0.5,
              callback: function(value, index, values) {
                return yAxisLabels[value];
              },
            },
            gridLines: {
              drawBorder: false,
              zeroLineColor: "#ccc",
              color: 'rgba(255,255,255,0.05)'
            }

          }],

          xAxes: [{   
            type: "time",
            time: {
              parser: 'HH:mm',
              unit: 'hour',
              displayFormats: {
                hour: 'HH:mm'
              },
            },
            gridLines: {
              drawBorder: false,
              color: 'rgba(255,255,255,0.1)',
              zeroLineColor: "transparent",
              display: false,
            },
            ticks: {
              padding: 20,
              fontColor: "#9f9f9f"
            }
          }]

        },

      }
    });

绘制的图表如下所示： https://imgur.com/a/JzYzGRC

更新：如果在图表（数据：{data}）中声明数据属性时，将其用大括号括起来，则会得到空图表，但至少有标签： https://imgur.com/a/1iQKIs3

ChartJS折线图未正确显示时间间隔

0 个答案: