barChartにchart.jsを使って配列を追加するには？

Question

私は、このような棒グラフがありますを、私はこのように、方法にして、サーバーからラベルを受け取ることができます。

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

またはこのような：

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

そして、私は第一の変形を受けた場合、次に示されています1行のバーに、私はこのようにそれらを表示する必要があります。

ホー私はこれらの小鈴を別の下に表示できますか？

さらに興味があります：各バーに値を追加する方法は？

私のコードのようになります。

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

はhighchartsにChart.jsからチャートライブラリを変更することで、これを解決します。

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>` 
       } 
       } 
      },