图表JS不使用日期

时间:2018-03-15 19:23:10

标签: chart.js

根据Chart JS documentation,它应该能够支持时间。我有一个Chart JS jsfiddle,我将数据更改为

data: [{x:new Date(), y: "15.375"},
       {x:new Date(), y: "25.375"}]

但是当我再次运行时,会有nothing in the graph

1 个答案:

答案 0 :(得分:1)

使用Time Cartesian Axis Chart.js时还需要moment.js库; 检查http://www.chartjs.org/docs/latest/getting-started/installation.html#stand-alone-build

var options = {
  type: 'scatter',
  data: {
    datasets: [{
      label: "Server 2",
      backgroundColor: "rgba(196, 93, 105, 0.3)",
      showLine: true,
      data: [{
          x: new Date(),
          y: "15.375"
        },
        {
          x: '2018-03-10',
          y: "25.375"
        }
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day'
        }
      }],
      yAxes: [{}]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas { background-color : #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>


<canvas id="chartJSContainer" width="600" height="400"></canvas>