2017-09-26 92 views
2

我想根據日期根據2個值製作內嵌圖表。 對於這個例子,我只用了3個值。在沒有標籤的情況下顯示日期

但是我無法在不使用標籤的情況下在軸上顯示值。 我不想定義它們,因爲我希望能夠選擇是否按天,月顯示... 而且我可能每天都有幾個值。圖形 樣,我想知道: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屬性,您可以定義一個labels屬性,它是標籤的數組,它可以與各種內容的字符串。

例如:

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

// ... 

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

謝謝你的幫助,但我想沒有標籤更加靈活地做。 – jaribu

相關問題