2017-09-26 2 views
2

날짜에 따라 2 개의 값을 기반으로 인라인 차트를 만들고 싶습니다. 예를 들어, 나는 단지 3 개의 값만 사용했습니다.xAxes에 레이블이없는 날짜 표시

그러나 레이블을 사용하지 않고 축에 값을 표시 할 수 없습니다. 일, 월별로 표시 할지를 선택할 수 있기를 원하기 때문에 그 (것)들을 정의하고 싶지 않습니다 ... 잠재적으로 저는 하루에 여러 개의 값을 가질 수 있습니다. 내가 실현하려는 그래픽의 샘플 : 다양한 내용으로 문자열이 될 수 있습니다 라벨의 배열 인 labels 속성을 정의 할 수 있습니다 sample

<div style="width:400px"> 
    <canvas id="myChart" width="400" height="400"></canvas> 
</div> 
<script> 
    var timeCheck = ['2017-09-21 11:30:51.418Z', '2017-09-25 10:52:30.966Z', '2017-09-25 12:35:51.118Z'] 
    var valueOne = [3578, 3110, 971] 
    var valueTwo = [2516, 2516, 2516] 
    var test = [{x: '2017-09-21 11:30:51.418Z', y: 3578},{x: '2017-09-25 10:52:30.966Z', y: 3110},{x: '2017-09-25 12:35:51.118Z', y: 971}] 

    var ctx = document.getElementById("myChart").getContext('2d'); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 

      datasets: [{ 
       label: '# the value One', 
       data: valueOne, 
       backgroundColor: [ 
        'rgba(255, 133, 27, 0.2)' 
       ], 
       borderColor: [ 
        '#ff851b' 
       ], 
       borderWidth: 2 
      }, { 
       label: '# the value Two', 
       data: valueTwo, 
       backgroundColor: [ 
        'rgba(0, 116, 217, 0.2)' 
       ], 
       borderColor: [ 
        '#0074d9' 
       ], 
       borderWidth: 2 
      }] 
     }, 
     options: { 
      scales: { 
       xAxes: [{ 
        time: { 
         unit: 'day' 
        } 
       }] 
      } 
     } 
    }); 
</script> 

답변

0

data 특성에 따라. 예를 들어

:

const labels = items.map(item => { 
    // return the desired label for each item here 
}) 

// ... 

new Chart(context, { 
    data: { 
    labels: labels 
    // ... 
    } 
    // ... 
} 
+0

는 당신의 도움을 주셔서 감사하지만 더 많은 유연성 레이블없이 할 싶습니다. – jaribu