web-dev-qa-db-ja.com

Chart.jsツールチップとY軸にカンマを追加する

私はここでstackoverflowでいくつかの答えを試しましたが、うまくいかなかったために失敗しました。Chart.jsは本当に新しいので、ご容赦ください。

これは私がこれまでに試したことです。 カンマをChartJSデータポイントに追加 そしてこれ Chart.js数値形式

これが私のコードです：

前もって感謝します。

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);
        }
    });
}

ツールチップとY軸にコンマを追加したいのですが...

enter image description here

javascriptjquerycharts
15
Sam Teng Wong

YAxesの目盛りオプションの場合、これは数千のマークにコンマを追加します。

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

同様の関数をツールチップコールバックに追加できます。

この完全な例 [〜＃〜] fiddle [〜＃〜]

12
dangre00

小数が使用されている場合、受け入れられた回答はカンマを正しい場所に配置しません

45000.00は45,000、.00と表示されます

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;
                            }
                       }                            
                    }
                }]
            }
        }
12
Jay Rizzi

受け入れられた回答は、棒グラフなど、列ごとに1つのデータセットを持つグラフで正常に機能します。データセットの場所がハードコードされているため、折れ線グラフなどのマルチデータセットグラフではソリューションが失敗します。解決策は、ハードコードされたデータセットインデックスの場所（data.datasets [0]）を、chartjsに組み込まれた動的インデックスの場所（data.datasets [tooltipItem.datasetIndex]）に置き換えることです。 。

数値のフォーマットは、ユーザーのロケール設定に従って値をフォーマットすることで最もよく達成できます。これにより、数字が正しいデコレーターを使用するようになります（ユーザーのロケールに応じて、数千の区切り文字はコンマまたはピリオドにすることができます）。

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

より多くの通貨換算について

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
1
Dexter

私はここで吐き出しているだけですが、データが配列であると仮定して、ループしてカンマを追加することはできませんか？

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

（この例はお金を示しています）

callback: function(value, index, values){
               return value.toLocaleString("en-US",
              {style:"currency", 
                currency:"USD",
                minimumFractionDigits: 0, 
                maximumFractionDigits: 0});
           }
0
DeltaTango

これについては非常に複雑な答えがたくさんあります。

この機能は、すでに.toLocaleString()を使用してJavaScriptに組み込まれているため、ホイールを再発明する必要はありません。これは小数も考慮します。

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

長い数値をシステム設定に従ってフォーマットされた数値に変換する特定のJavaScript関数があります：toLocaleString（）。

目盛りオプション内に「callback：」キーワードを追加することにより、各目盛り（またはその番号インデックスで識別される特定の目盛り）のラベルを独自の関数で作成する必要があることを指定できます。

前：

        ticks: {
                  max: maxAltitude,
                  min: 0
                }

後：

        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

コメントなしで、未使用の変数なし：

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

同じ方法をツールチップに適用できます。

0
jumpjack