web-dev-qa-db-ja.com

チャートJS-xAxesに時間を使用

このコードを追加しました

scales: 
{
        xAxes: 
        [{
            type: 'time',
            time: 
            {
                unit: 'month',
                displayFormats: { month: 'MM' },
                max: '2017-10-09 18:43:53',
                min: '2017-10-02 18:43:53'
            }
        }]
},

オプションに、それは動作しません。何が間違っているのですか？

FIDDLE->https://jsfiddle.net/o473y9pw/

javascriptjquerytimechart.js
11
Peter

X軸に時間を使用したいので、labels配列は日付/時間文字列の配列である必要があります（labels配列はx軸に対応しています） 。

また、 parser プロパティ（日付/時刻を正しく解析するため）、およびx-axis ' ticks source to data（x-axis ticksを適切に生成するため）。

[〜＃〜] update [〜＃〜]

日付の最小値と最大値しかない場合は、素敵な小さな plugin を作成して、labels（date）配列に値を設定できます動的に、そのようなものとして：

plugins: [{
   beforeInit: function(chart) {
      var time = chart.options.scales.xAxes[0].time, // 'time' object reference
         // difference (in days) between min and max date
         timeDiff = moment(time.max).diff(moment(time.min), 'd');
      // populate 'labels' array
      // (create a date string for each date between min and max, inclusive)
      for (i = 0; i <= timeDiff; i++) {
         var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
         chart.data.labels.Push(_label);
      }
   }
}]

note：moment.js は、計算を簡単にするために使用されます。

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ ⧩
（デモのために、時間をunitからdayに変更しました）

$(document).ready(function() {

   new Chart(document.getElementById("chartBox"), {
      type: 'line',
      data: {
         datasets: [{
            data: [12, 19, 3, 5, 2, 3, 32, 15],
            label: "",
            borderWidth: 2,
            borderColor: "#3e95cd",
            fill: false,
            pointRadius: 0
         }]
      },
      options: {
         scales: {
            xAxes: [{
               type: 'time',
               time: {
                  parser: 'YYYY-MM-DD HH:mm:ss',
                  unit: 'day',
                  displayFormats: {
                     day: 'ddd'
                  },
                  min: '2017-10-02 18:43:53',
                  max: '2017-10-09 18:43:53'
               },
               ticks: {
                  source: 'data'
               }
            }]
         },
         legend: {
            display: false
         },
         animation: {
            duration: 0,
         },
         hover: {
            animationDuration: 0,
         },
         responsiveAnimationDuration: 0
      },
      plugins: [{
         beforeInit: function(chart) {
            var time = chart.options.scales.xAxes[0].time, // 'time' object reference
               timeDiff = moment(time.max).diff(moment(time.min), 'd'); // difference (in days) between min and max date
            // populate 'labels' array
            // (create a date string for each date between min and max, inclusive)
            for (i = 0; i <= timeDiff; i++) {
               var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
               chart.data.labels.Push(_label);
            }
         }
      }]
   });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@latest/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>

<canvas id="chartBox"></canvas>
11
ɢʀᴜɴᴛ

データセットは、時間のプロパティxと値のyプロパティを持つオブジェクトの配列である必要があります。他にどのようにチャートを描画できますか？

$(document).ready(function() {
  var data = [{
      x: new moment().add(-10, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-8, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-6, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-4, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-2, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-0, "months"),
      y: Math.random() * 100
    },
  ];

  new Chart(document.getElementById("chartBox"), {
    type: 'line',
    data: {
      datasets: [{
        data: data,
        borderColor: "#3e95cd",
        fill: false
      }]
    },
    options: {
      scales: {
        xAxes: [{
          type: 'time'
        }]
      },
      legend: false
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<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.7.0/Chart.bundle.min.js"></script>

<canvas id="chartBox"></canvas>

フィドル

5
Gökhan Kurt

いくつかの変更が必要になる場合があります。

  1. データにはtimeデータを含める必要があります。

  2. スケール単位をmonthに設定した場合、実際のスケールを表示するには、最小最大値を1か月以上にする必要があります。

簡単な作業例を示します。

https://jsfiddle.net/f2xmkkao/

1
Lee Han Kyeol

xAxisラベルが日付形式の場合、このコードを使用します

time: 
     {
         format: 'MM',
         unit: 'month',
         displayFormats: { month: 'MM' },
         max: '2017-10-09 18:43:53',
         min: '2017-10-02 18:43:53'
     }

xAxisラベルが数値を使用したものと同じ使用する場合

 time:
      {
         format: 'MM',
         unit: 'month',
         parser:'MM',
         displayFormats: { month: 'MM' },
         max: '2017-10-09 18:43:53',
         min: '2017-00-02 18:43:53'
      }
1
Pratheeswaran