如何使用chart.js将数组添加到barChart？

Question

我有这样的barChart：，我可以从服务器接收标签，如下所示：

"dateLabels": [
  "01 Thu", "02 Fri", "03 Sat", ....
]

或者像这样：

"dateLabels": {
           "dayOfMonth": [1, 2, 3, 4, ...],
           "dayOfWeek": ["Th", "Fr", "Sa", "Su", ...]
       }

如果我收到第一个变种然后在一行的栏上显示，但我需要像这样显示它们：

如何将这些lebels一个展示在另一个下面？

还有一个兴趣：如何在每个栏上添加值？

我的代码如下：

getCombData () {
    this.XTimeApi.combData()
  .subscribe((response) => {
    this.data = response;
    let canvas: any = document.getElementById("comb");
        let ctx = canvas.getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
        labels: response.data.dateLabels, // ['01 Mon', '02 Tue', '03 Wed']
        datasets:
        [
          {
            label: "Diff",
            backgroundColor: 'rgba(255, 255, 255, 0.8)',
            borderColor: 'rgb(194, 194, 194)',
            borderWidth: 1,
            data: [0, 0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,0,0,8,8,8,7,8,0,0,8],
          },
          {
            label: "Weekend",
            backgroundColor: 'rgba(194, 194, 194, 0.4)',
            borderColor: 'rgb(194, 194, 194)',
            borderWidth: 1,
            data: [8, 8, 0,0,0,0,0,8,8,0,0,0,0,0,8,8,0,0,0,0,0,8,8,0,0,0,0,0,8,8,0],
          },
          {
            label: "NPA",
            backgroundColor: 'rgb(28, 132, 198)',
            borderColor: 'rgb(28, 132, 198)',
            borderWidth: 1,
            data: [0, 0, 3, 0, 0, 0, 0, 0, 0,0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0]
          },
          {
            label: "Loged hours",
            backgroundColor: 'rgb(26, 179, 148)',
            borderColor: 'rgb(26, 179, 148)',
            borderWidth: 1,
            data: [0, 0, 5, 8, 8, 7, 7, 0, 0,0, 3, 8, 8, 8, 0, 0, 9, 0,0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0]
          },
          {
            label: "Overtimes",
            backgroundColor: 'rgb(252, 223, 5)',
            borderColor: 'rgb(194, 194, 194)',
            borderWidth: 1,
            data: [0, 0, 0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
          },
          {
            label: "No report",
            backgroundColor: 'rgb(255, 255, 255)',
            borderColor: 'rgb(237, 85, 101)',
            borderWidth: 1,
            data: [0, 0, 0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
          },
          {
            label: "Report not send",
            backgroundColor: 'rgb(237, 85, 101)',
            borderColor: 'rgb(237, 85, 101)',
            borderWidth: 1,
            data: [0, 0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0],
          }
        ]
      },
                options: {
        scaleShowLabels: true,
        tooltips: {
                        mode: 'label'
                    },
        legend: {
          display: false
        },
        scales: {
          scaleLabel: {
            labelString: 'Text'
          },
          yAxes: [{
            ticks: {
              maxRotation: 5,
                                max: 10,
                                min: 0,
                                stepSize: 4
                            },
            stacked: true
          }],
          xAxes: [{
            ticks: {
              fontSize: 10,
            },
            stacked: true,
            gridLines: {
              display: false,
            }
          }]
        }
      }
            });
        });
    }

Answer 1

通过将图表库从Chart.js更改为highcharts来解决此问题。

HighChart允许您使用格式化程序：

 xAxis: {
    categories:  [ "2016-12-01", "2016-12-02", "2016-12-03", "2016-12-04", "2016-12-05", "2016-12-06", "2016-12-07", "2016-12-08", "2016-12-09", "2016-12-10", "2016-12-11", "2016-12-12", "2016-12-13", "2016-12-14", "2016-12-15", "2016-12-16", "2016-12-17", "2016-12-18", "2016-12-19", "2016-12-20", "2016-12-21", "2016-12-22", "2016-12-23", "2016-12-24", "2016-12-25", "2016-12-26", "2016-12-27", "2016-12-28", "2016-12-29", "2016-12-30", "2016-12-31" ],
    labels: {
       formatter: function () {
         return `<span>${moment(this.value.date).format('DD')}/span>
                 <br>
                 <span>${moment(this.value.date).format('dd')}</span>`
                }
              }
          },