web-dev-qa-db-ja.com

日付を使用して折れ線グラフを作成するChart.js

Chart.jsを日付で動作させることができないようです。私はかなり多くの異なる方法を試しました：

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: new Date("2015-3-15 13:3"), y: 12 },
            { t: new Date("2015-3-25 13:2"), y: 21 },
            { t: new Date("2015-4-25 14:12"), y: 32 }
    ],
    options: {
        label: "placeholder"
    }
});

そして：

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: "2015-3-15 13:3", y: 12 },
            { t: "2015-3-25 13:2", y: 21 },
            { t: "2015-4-25 14:12", y: 32 }
    ],
    options: {
        label: "placeholder"    
    }
});

そして：

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: "Sun Mar 15 2015 12:03:45 GMT+0000 (GMT Standard Time)", y: 12 },
            { t: "Wed Mar 25 2015 12:02:15 GMT+0000 (GMT Standard Time)", y: 21 },
            { t: "Sat Apr 25 2015 13:12:30 GMT+0100 (GMT Daylight Time)", y: 32 }
    ],
    options: {
        label: "placeholder"    
    }
});

私の試みのほんの一部をカバーするために、ドキュメントを読んだ後でも日付を適切に設定する方法が得られないようです（ http://www.chartjs.org/docs/latest/axes/cartesian/ time.html ）（実際には例を挙げていません）

使用されているHTML：

<div class="container">
    <canvas id="examChart"></canvas>
</div>

これはかなり単純な問題だと思いますが、どんな助けも大歓迎です。

javascriptdatechart.jsejs
6
Jonathan Woollett-light

dataset内でデータを移動する必要があります。 使用マニュアル を見ると、datasets配列が使用されています。 time のドキュメント内のデータセットの "hint"もそれほど明確ではありません（見出しを参照）。

以下のスニペットを参照してください：

基本的な使用例をコピーし、最初の試行からデータを挿入しました（+いくつかのラベルを追加しました）

var ctx = document.getElementById("examChart").getContext("2d");

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [new Date("2015-3-15 13:3").toLocaleString(), new Date("2015-3-25 13:2").toLocaleString(), new Date("2015-4-25 14:12").toLocaleString()],
    datasets: [{
      label: 'Demo',
      data: [{
          t: new Date("2015-3-15 13:3"),
          y: 12
        },
        {
          t: new Date("2015-3-25 13:2"),
          y: 21
        },
        {
          t: new Date("2015-4-25 14:12"),
          y: 32
        }
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<div class="container">
  <canvas id="examChart"></canvas>
</div>
8
Ramiz Wachtler

@RamizWachtlerの回答に基づいて、グラフのオプションセクションに追加して、タイムアウトを適切にスケールできます。これはCharts.js 2.3では動作しないように見えることに注意してください。 2019年4月現在、最新のCharts.jsバージョンを使用する作業スニペットを追加しました。

さらに、時間のフォーマットをISO8601準拠に変更しました。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'linear'
            }]
        }
    }
});

ソース- https://www.chartjs.org/docs/latest/axes/cartesian/time.html

var ctx = document.getElementById("examChart").getContext("2d");

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["2015-03-15T13:03:00Z", "2015-03-25T13:02:00Z", "2015-04-25T14:12:00Z"],
    datasets: [{
      label: 'Demo',
      data: [{
          t: "2015-03-15T13:03:00Z",
          y: 12
        },
        {
          t: "2015-03-25T13:02:00Z",
          y: 21
        },
        {
          t: "2015-04-25T14:12:00Z",
          y: 32
        }
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'linear'
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0-rc.1/Chart.bundle.js"></script>
<div class="container">
  <canvas id="examChart"></canvas>
</div>
3
SoiBoi

時間を使用する場合は、現地時間（オーストラリア+10時間/ 36000秒）が追加されるため、UTC時間を使用する必要があるため、国ごとに異なるタイムゾーンがあります。重要なのは、時間0秒= moment.utc（ '1970-01-01 00:00:00'）の変換でmoment.utcを使用することです

moment.utc('1970-01-01').add(3600, 'seconds')を使用して値を追加し、y軸の値またはツールヒント項目から、参照する必要があります

callback: value => {
    date = moment.utc(value);
    if(date.diff(moment.utc('1970-01-01 23:59:59'), 'minutes') === 0) 
    {
        return null;
    };
    date.format('HH:mm:ss');
}

label: (item, data) => data.datasets[item.datasetIndex].label +" "+ 
moment.utc(data.datasets[item.datasetIndex].data[item.index]).format("HH:mm:ss")

https://lopeys.com/ironman/IMAUS_Charts_StackedTimes.htm

0
user10408

私の提案は、プロジェクトに moment.js ライブラリを追加し、モーメントを使用して日付をフォーマットすることです。また、ここで「t」と「y」を使用するかどうかもわかりません。時間をラベルとして追加し、それをxデータと一致させます。

var data = {
  labels: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
  datasets: [
    {
        data: [12,21,32],
    }
  ]
};

var myBarChart = Chart.Line(canvas,{
data:data,
});

フィドルの例があります here。

0
Jason Allshorn