在 MVC 5 上使用 Chart.Js 未在 X 轴上显示日期

Question

我使用 Chart.js 的折线图没有在 X 轴上显示日期。可以在调试模式下看到日期（来自 Json 控制器）。 Y轴没问题。 看我的图表：https://gyazo.com/96c992818ce575ac30c59622ed542acf。

它应该显示这样的情况：

1) 分支 2 计数 = 1，开始日期 = '2019-10-02'

2) 分支 2 计数 = 1，开始日期 = '2019-09-30'

我已经尝试过stackoverflow提供的示例，但没有成功。

var dataChart = {
           label: [],
           datasets: [
               {
                   label: "Branch1",
                   backgroundColor: "rgba(0, 0, 255, 0.31)",
                   borderColor: "rgba(0, 0, 255, 0.66)",
                   pointBorderColor: "rgba(0, 0, 255,0.70)",
                   pointBackgroundColor: "rgba(0, 0, 255,0.70)",
                   pointHoverBackgroundColor: "#fff",
                   pointHoverBorderColor: "rgba(0, 0, 255, 1)",
                   pointBorderWidth: "1",
                   data: []
               },
               {
                   label: "Branch2",
                   backgroundColor: "rgba(255, 128, 128, 0.31)",
                   borderColor: "rgba(255, 128, 128, 0.66)",
                   pointBorderColor: "rgba(255, 128, 128,0.70)",
                   pointBackgroundColor: "rgba(255, 128, 128,0.70)",
                   pointHoverBackgroundColor: "#fff",
                   pointHoverBorderColor: "rgba(255, 128, 128, 1)",
                   pointBorderWidth: "1",
                   data: []
               },
               {
                   label: "Branch3",
                   backgroundColor: "rgba(0, 204, 153, 0.31)",
                   borderColor: "rgba(0, 204, 153, 0.66)",
                   pointBorderColor: "rgba(0, 204, 153,0.70)",
                   pointBackgroundColor: "rgba(0, 204, 153,0.70)",
                   pointHoverBackgroundColor: "#fff",
                   pointHoverBorderColor: "rgba(0, 204, 153, 1)",
                   pointBorderWidth: "1",
                   data: []
               }
           ]
       };

       $.getJSON("TreasuryChart/",
           function(branchData) {
               for (var i = 0; i < branchData.length; i++) {
                   var d = moment(branchData[i].startDate);
                   dataChart.label.push(d);
                   dataChart.datasets[0].data.push(branchData[i].branch1);
                   dataChart.datasets[1].data.push(branchData[i].branch2);
                   dataChart.datasets[2].data.push(branchData[i].branch3);
               }
               var ctx = document.getElementById("TreasuryChart").getContext("2d");
               var myLineChart = new Chart(ctx,
                   {
                       type: "line",
                       data: dataChart,
                       options: {
                           responsive: true,
                           maintainAspectRatio: false,
                           scales: {
                               xAxis: [
                                   {
                                       //display: true,
                                       type: 'time',
                                       time: {
                                           parser: 'MMM D',
                                           unit: 'day',
                                           displayFormats: {
                                               day: 'MMM D'
                                           }
                                       },
                                       ticks: {
                                         source: 'dataChart'
                                       }
                                   }
                               ],
                               yAxes: [
                                   {
                                       ticks: {
                                           beginAtZero: true
                                       }
                                   }
                               ]
                           }
                       }
                   });
           });

我希望在 X 轴上以 Day Month 格式显示带有日期的图表。

感谢您的帮助。

Answer 1

简单的拼写错误。这是xAxes 不是xAxis。 （并且我将 scaleLabel 设置为display: true，因为我不知道您使用的是什么 Chart.js 版本）

scales: {
   xAxes: [
       {
           //display: true,
           type: 'time',
           time: {
               parser: 'MMM D',
               unit: 'day',
               displayFormats: {
                   day: 'MMM D'
               }
           },
           ticks: {
             source: 'dataChart'
           },
           scaleLabel: {
              display: true
           }
       }
   ],
   yAxes: [
       {
           ticks: {
               beginAtZero: true
           },
           scaleLabel: {
             display: true
           }
       }
   ]

}