charts.jsの円グラフの千単位区切り

Question

私はChart.jsを使用して円グラフを描画しています。私は、このデータのことを明確にするために

var ctx = document.getElementById("myChart").getContext('2d'); 
     var myChart = new Chart(ctx, { 
     type: 'pie', 
     data: { 
      labels: #{raw @labels.to_json}, 
      datasets: [{ 
      backgroundColor: #{raw @colors.to_json}, 
      data: #{@followers} 
      }] 
     } 
     }); 

を使用し、グラフを描画する

は私が["500,000", "75,000", "100,000"]

のようにこれらのdata: [500000, 75000, 100000]千として、セパレータを表示する必要があり、この

data: { 
     labels: ["FAISAL","muhammadfaisali","faisaliqbal3699"], 
     datasets: [{ 
     backgroundColor: ["#00b638","#efaa30","#50c8ea"], 
     data: [500000, 75000, 100000] 
     }] 
    } 

のようなものです私は別の

を試してみました

cludingこの方法

function separator(numbers) 
     { data = [] 
     for (i = 0; i < numbers.length; ++i) { 
      data.push(numbers[i].toLocaleString()) 
     } 
     data 
     } 

を書いて、私が好きなこの

data: separator(#{@followers}) 

その形式のデータのようにそれを使用しようとしましたが、千話の区切りのデータを表示する方法は何Cannot read property 'custom' of undefined

のようなエラーが発生しますここに

Answer 1

chart.jsでこれを行うには、tooltips.callbacks.labelコールバックプロパティを使用する必要があります。このコールバックから返される値は、ツールヒントテキストの生成に使用される値です。

データ値にローカル文字列表現を使用するツールチップコールバックで構成されたグラフです。

var ctx = document.getElementById("chart-area").getContext("2d"); 
var myPie = new Chart(ctx, { 
    type: 'pie', 
    data: { 
    labels: ["FAISAL","muhammadfaisali","faisaliqbal3699"], 
    datasets: [{ 
     backgroundColor: ["#00b638","#efaa30","#50c8ea"], 
     data: [500000, 75000, 100000] 
    }], 
    }, 
    options: { 
    title: { 
     display: true, 
     text: 'Employee Overview', 
     fontStyle: 'bold', 
     fontSize: 20 
    }, 
    tooltips: { 
     callbacks: { 
     // this callback is used to create the tooltip label 
     label: function(tooltipItem, data) { 
      // get the data label and data value to display 
      // convert the data value to local string so it uses a comma seperated number 
      var dataLabel = data.labels[tooltipItem.index]; 
      var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString(); 

      // make this isn't a multi-line label (e.g. [["label 1 - line 1, "line 2, ], [etc...]]) 
      if (Chart.helpers.isArray(dataLabel)) { 
      // show value on first line of multiline label 
      // need to clone because we are changing the value 
      dataLabel = dataLabel.slice(); 
      dataLabel[0] += value; 
      } else { 
      dataLabel += value; 
      } 

      // return the text to display on the tooltip 
      return dataLabel; 
     } 
     } 
    } 
    } 
}); 

これはcodepenで実際に確認できます。