Question

我是javascript世界的新手，所以如果有明显的解决方案，请耐心等待，但我正在努力绘制chartjs图的X轴上的日期（X点）。我在那里得到一些奇怪的时间你可以检查jsfiddle。我做错了什么？

var ctx = document.getElementById("myChart");
var data = {
   datasets: [{
       label: " Property",
       lineTension: 0.1,
       data: [{
           x: 2017 - 04 - 11,
           y: 2000000.00
         },
         {
           x: 2017 - 04 - 12,
           y: 1000000.00
         },
         {
           x: 2017 - 04 - 13,
           y: 3000000.00
         },
       ]
     },
     {
       label: " Property",
       lineTension: 0.1,
       data: [{
           x: 2017 - 04 - 12,
           y: 472943.00
         },
         {
           x: 2017 - 04 - 13,
           y: 1000000.00
         },
       ]
     },
   ]
 };
 var myLineChart = new Chart(ctx, {
   type: 'line',
   data: data,
   options: {
     scales: {
       xAxes: [{
         id: 'ScartCharxAxes',
         type: 'time',
         unit: 'day',
         time: {
           displayFormats: {
             day: 'D MMM YYYY'
           },
         }
       }]
     }
   }
 });

我的代码可在http://jsfiddle.net/py1bpf02/3/

上找到

Answer 1

在数据集中，日期应为字符串。你做的是数学，而不是日期。 2017-04-11 = 2002。

var ctx = document.getElementById("myChart");
var data = {
  datasets: [

    {
      label: " Property",
      lineTension: 0.1,
      data: [{
          x: "2017-04-11",
          y: 2000000.00
        },

        {
          x: "2017-04-12",
          y: 1000000.00
        },

        {
          x: "2017-04-13",
          y: 3000000.00
        },
      ]
    },

    {
      label: " Property",
      lineTension: 0.1,
      data: [{
          x: "2017-04-12",
          y: 472943.00
        },

        {
          x: "2017-04-13",
          y: 1000000.00
        },
      ]
    },


  ]
};

var myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      xAxes: [{
        id: 'ScartCharxAxes',
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'D MMM'
          },
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

ChartJS散点图X轴标签未正确显示

1 个答案: