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

澄清这个数据的事情是这样的

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

我需要将这些data: [500000, 75000, 100000]显示为千位分隔符，例如["500,000", "75,000", "100,000"]

我尝试了不同的

包括编写此方法的内容

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看到它的实际效果。

图表饼图中的千位分隔符

1 个答案: