gruppierte Balkendiagramme jede Gruppe unterschiedliche Ebene in chart.js

Question

mit char. JS Balkendiagramm, erste Gruppe Car Daten (Treibstoff, EMI, Service), wobei jede Gruppe einzelnes Etikett, wie Gruppe zu spalten einzelnes Etikett

let randomScalingFactor = function(){ return Math.round(Math.random()*5000)}; 
    return { 
     labels: ["car","Recharge","Food","May","June","July"], 
     datasets : [ 
      { 
       fillColor : 'rgba(220,220,220,0.8)', 
       data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()], 
     labels: ["fuel","Emi","service"], 
      }, 
     { 
       fillColor : [chartColors.white, chartColors.gossip, chartColors.blueStone, chartColors.surfieGreen, chartColors.silverTree, chartColors.gossip ], 
       data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()], 
     labels: ["DTH","postpaid","prepaid"], 
      }, 
      { 
       fillColor : [chartColors.white, chartColors.gossip, chartColors.blueStone, chartColors.surfieGreen, chartColors.silverTree, chartColors.gossip ], 
       data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor()],label: 'sadf' 
      } 

     ]   
    } 

ihr ref Bild

Answer 1

Der Grund, warum Sie sehen nicht den Tooltip Label ist, weil Sie die falsche Label Config-Option verwendet haben. Die Option heißt label nicht labels und akzeptiert nur eine einzelne Zeichenfolge (kein Array von Zeichenfolgen). Wenn Sie ein Array von Zeichenfolgen an label übergeben, dann erstellt chart.js einfach eine durch Komma getrennte Zeichenfolge für jeden Index im Array für die Bezeichnung.

Mit dem gesagt, ich kann sehen, was Sie versuchen zu tun, aber leider gibt es keine Möglichkeit, dies mit Chart.js zu tun. Ein Dataset stellt immer einen Datenwert pro Kategorielabel dar. Mit anderen Worten: Jeder Index im Array data eines Datasets wird demselben Array im Array labels zugeordnet (der außerhalb des Datasets definiert ist).

Hier ist eine codepen zu zeigen, was ich meine.

Wie Sie sehen können, erstreckt sich jeder Datensatz über alle Kategorien (Labels). Sie können nicht 3 Datensätze für "Auto", 3 Datensätze für "Aufladen" usw. haben. Das Beste, was Sie tun können, ist einen Wert von 0 für die Kategorien festzulegen, zu denen der Datensatz nicht gehört, aber es macht den Graph ziemlich gut verwirrend.

Hier ist eine example, die das zeigt.