날짜를 사용하여 선 그래프를 만드는 Chart.js

Question

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> 

나는이 다소 간단한 문제가 상상하지만 난 그냥, 아무 생각이 어떤 도움을 크게 감상 할 수있다.

Answer 1

dataset 내에서 데이터를 이동해야합니다. usage manual을 살펴보면 datasets 어레이가 사용됩니다. time에 대한 문서 내의 데이터 세트에 대한 의 힌트도 분명하지 않습니다 (표제 참조).

아래 코드 조각 참조 :

난 그냥 기본적인 사용 예를 복사하여 첫 번째 시도에서 데이터를 삽입 (+ 추가 몇 라벨)

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>

Answer 2

내 프로젝트에 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.