2017-09-26 134 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

相关问题