Chart.js Fügen Sie Kommas zu Tooltip und Y-Achse hinzu

Ich habe hier in Stackoverflow einige Antworten versucht, aber ohne Erfolg konnte es nicht funktionieren. Ich bin wirklich neu in Chart.js, also haben Sie bitte etwas Geduld mit mir.

das habe ich bisher versucht. Fügen Sie Kommas zu ChartJS-Datenpunkten und diesem Chart.js-Zahlenformat hinzu

hier ist mein Code:

vielen Dank im Voraus.

Chart.defaults.global.legend = {
 enabled: false
};

function load_yearly_sales_per_agent(param_year, transaction_url){
    $(".custom_loader").show();
    $(".custom_graph").hide();
    $.ajax({
        url:transaction_url,
        type:'post',
        data: {year : param_year},
        dataType:'json',
        success:function(result){
              // Bar chart
              var ctx = document.getElementById("mybarChart");
              var mybarChart = new Chart(ctx, {
                responsive: true,
                multiTooltipTemplate: "<%=addCommas(value)%>",
                type: 'bar',
                data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                  datasets: [{
                    label: 'Sales Per Month',
                    backgroundColor: "#26B99A",
                    data: result
                  }]
                },

                options: {
                  scales: {
                    yAxes: [{
                      ticks: {
                        beginAtZero: true
                      }
                    }]
                  }
                }
              });
              $(".custom_loader").hide();
              setTimeout(function(){
                $(".custom_graph").show();
              }, 200);
        }
    });
}

Was ich möchte, ist ein Komma auf dem Tooltip und der Y-Achse hinzuzufügen …

Für Ihre yAxes-Ticks-Optionen werden Kommas bei den Tausenderzeichen hinzugefügt:

ticks: {
    beginAtZero:true,
    userCallback: function(value, index, values) {
        value = value.toString();
        value = value.split(/(?=(?:...)*$)/);
        value = value.join(',');
        return value;
    }
}

Eine ähnliche Funktion kann in einem Tooltip-Callback hinzugefügt werden.

Vollständiges Beispiel in diesem GEIGE

Ich sehe viele übermäßig komplizierte Antworten dafür.

Diese Funktionalität ist bereits in Javascript integriert .toLocaleString(), wir müssen das Rad nicht neu erfinden! Dies berücksichtigt auch Dezimalzahlen.

yAxes: [
    {
        ticks: {
            beginAtZero: true,
            userCallback: function(value, index, values) {
                return value.toLocaleString();   // this is all we need
            }
        }
    }
]

Die akzeptierte Antwort würde Kommas nicht an der richtigen Stelle platzieren, wenn Dezimalzahlen verwendet werden

45000,00 würde als 45.000,00 angezeigt

verwendet den folgenden Code für chartjs Version 2.3

       options: {
            responsive: true,
            maintainAspectRatio: false,
        tooltips: {
          callbacks: {
                label: function(tooltipItem, data) {
                    var value = data.datasets[0].data[tooltipItem.index];
                    if(parseInt(value) >= 1000){
                               return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                               return '$' + value;
                            }
                }
          } // end callbacks:
        }, //end tooltips                
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        callback: function(value, index, values) {
                            if(parseInt(value) >= 1000){
                               return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                               return '$' + value;
                            }
                       }                            
                    }
                }]
            }
        }

Die akzeptierte Antwort funktioniert gut für Diagramme mit einem einzelnen Datensatz pro Spalte, z. B. einem Balkendiagramm. Der hartcodierte Datensatzspeicherort führt dazu, dass die Lösung für Diagramme mit mehreren Datensätzen, wie z. B. Liniendiagramme, fehlschlägt. Die Lösung besteht darin, den hartcodierten Datensatz-Indexspeicherort (data.datasets[0]) mit einem in chartjs integrierten dynamischen Indexspeicherort (data.datasets[tooltipItem.datasetIndex]).

Die Formatierung der Zahlen lässt sich am besten erreichen, indem der Wert gemäß den Gebietsschemaeinstellungen des Benutzers formatiert wird. Dadurch wird sichergestellt, dass Zahlen die richtigen Decorators verwenden (das Tausendertrennzeichen kann ein Komma oder ein Punkt sein, je nach Gebietsschema des Benutzers).

options: {
  tooltips: {
    callbacks: {
      label: function (tooltipItem, data) {
        var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        return parseInt(tooltipValue).toLocaleString();
      }
    }
  }
}

Ich spucke hier nur herum, aber unter der Annahme, dass Daten ein Array sind, könnten Sie nicht einfach eine Schleife durchlaufen und Kommas hinzufügen?

datasets: [{
    label: 'Sales Per Month',
    backgroundColor: "#26B99A",
    data: result.map(function (i) {
       return i.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    })
}]

Für mehr Währungsumrechnung

ticks: {
    beginAtZero: true,
    callback: function(label, index, labels) {
        return Intl.NumberFormat('hi', { style: 'currency', currency: 'INR', minimumFractionDigits: 2 }  )
        .format(label).replace(/^(\D+)/, '$1 ');
    },
}

// ₹ 1,400.00

Es gibt eine spezielle Javascript-Funktion, um eine lange Zahl in eine gemäß den Systemeinstellungen formatierte Zahl umzuwandeln: toLocaleString().

Sie können angeben, dass die Bezeichnung jedes Ticks (oder eines bestimmten Ticks, der durch seinen Zahlenindex identifiziert wird) von Ihrer eigenen Funktion erstellt werden muss, indem Sie das Schlüsselwort “callback:” in den Tick-Optionen hinzufügen:

Vor:

        ticks: {
                  max: maxAltitude,
                  min: 0
                }

Nach:

        ticks: {
                  max: maxAltitude,
                  min: 0, // <--- dont' foget to add this comma if you already have specified ticks options
                    callback:  
                      function(value, index, valuesArray) {
                          // value: currently processed tick label
                          // index of currently processed tick label
                          // valuesArray: array containing all predefined labels
                          return  value.toLocaleString(); 
                      } // Function end
                } // Ticks options end

Ohne die Kommentare und ohne unbenutzte Variablen:

        ticks: {
                  max: maxAltitude,
                  min: 0, 
                  callback:  
                      function(value) {
                        return  value.toLocaleString(); 
                      }
                }

Dieselbe Methode kann auf Tooltips angewendet werden.