如何将小时和分钟数据输入chartJS [英] How to feed hour and minute data into chartJS

问题描述

我正在尝试使用Chart.js制作折线图。我的数据格式如下：

I'm trying to make a line chart using Chart.js. My data is of the form:

var result = [{x:"18:00",y:"230"},{x:"19:00",y:"232"},{x:"20:00",y:"236"},{x:"22:00",y:"228"}];

其中x代表小时和分钟的时间。我输入了这样的数据

Where x represents the time with hours and minutes. I fed the data like this

var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            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","24:00"],
            datasets: [{
                label: 'Voltage Fluctuation',
                data: result,
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    position: 'bottom',
                    unit: 'minute',
        time: {
          displayFormats: {
            hour: 'HH:mm'
          }
        }
      }],
    },
  }
});

我得到一张空图表。我哪里错了？我觉得我的标签做错了，因为它们没有出现在图表上，但我不知道如何。有什么方法可以用momentjs提供数据标签吗？

And I'm getting an empty chart. Where am I going wrong? I feel I'm doing something wrong with my labels since they don't show up on the chart but I don't understand how. Is there any way I can feed datalabels with momentjs?

推荐答案

你不能只传递结果数组到数据，因为格式不正确。 data 属性需要一组数字。因此，在将它们用于图表之前，您需要解析标签（使用moment.js）和来自 result 数组的数据。

You cannot just pass the result array to data, as it isn't in correct format. data property expects an array of numbers. So, you need to parse the labels (using moment.js) and data from result array before using them for the chart.

以下是如何从结果数组中解析标签和数据并将其输入图表：

Here is how labels and data should be parsed from the result array and fed to the chart :

var result = [{ x: "18:00", y: "230" }, { x: "19:00", y: "232" }, { x: "20:00", y: "236" }, { x: "22:00", y: "228" }];

// parse labels and data
var labels = result.map(e => moment(e.x, 'HH:mm'));
var data = result.map(e => +e.y);

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'Voltage Fluctuation',
         data: data,
         borderWidth: 1
      }]
   },
   options: {
      scales: {
         xAxes: [{
            type: 'time',
            time: {
               unit: 'hour',
               displayFormats: {
                  hour: 'HH:mm'
               }
            }
         }]
      },
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

这篇关于如何将小时和分钟数据输入chartJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！