Chart.js Hinzufügen von Kommas zu Tooltip und Y-Achse

Question

Ich habe hier einige Antworten in stackoverflow versucht, aber vergebens funktionierte es nicht .. Ich bin wirklich neu in Chart.js, also bitte tragen Sie mit mir.

das habe ich bisher versucht. Add Commas to ChartJS Data Points und diese Chart.js number format

hier ist mein Code:

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 will, ist Komma auf Tooltip und Y-Achse hinzuzufügen .....

Answer 1

Für Ihre yAxes Zecken Optionen, wird dies Kommas in den Tausenden Marken hinzufügen:

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

ähnliche Funktion kann in einem Tooltip Rückruf hinzugefügt werden.

Voll Beispiel in diesem FIDDLE

Answer 2

ich hier bin nur spitballing aber die Daten unter der Annahme ist ein Array, couldn‘ teschleiben Sie einfach durch und fügen Sie Kommas hinzu?

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

Answer 3

die akzeptierte Antwort würde nicht Kommas an der richtigen Stelle setzen, wenn Dezimalzahlen sind

45.000,00 würde als 45.000 verwendet wird angezeigt, .00

verwendet den folgenden Code für chartjs ver 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; 
          } 
         }        
        } 
       }] 
      } 
     } 

Answer 4

Die angenommene Antwort funktioniert gut für Diagramme, die einen einzelnen Datensatz pro Spalte, z als Balkendiagramm. Die Position des fest codierten Datasets führt dazu, dass die Lösung bei Diagrammen mit mehreren Datasets, z. B. Liniendiagrammen, fehlschlägt. Die Lösung besteht darin, die Indexposition des fest codierten Datasets (data.datasets [0]) durch eine dynamische Indexposition zu ersetzen, die in chartjs (data.datasets [tooltipItem.datasetIndex]) integriert ist.

Die Formatierung der Zahlen kann am besten erreicht werden, indem der Wert entsprechend den Gebietsschemaeinstellungen des Benutzers formatiert wird. Dadurch wird sichergestellt, dass Zahlen die richtigen Dekoratoren verwenden (das Tausendertrennzeichen kann je nach Gebietsschema des Benutzers ein Komma oder ein Punkt sein).

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