如何根据值对XY折线图工具提示项进行排序并添加千位分隔符？

Question

我正在使用Chart.js 2.1.4,我想根据工具提示项值(yAxis值)对工具提示项进行排序.我还想为值添加千位分隔符.

下图中的行应根据值进行排序:

这为Scales添加了分隔符:Chart.js 2.0使用Currency和Thousands Separator格式化Y轴

使用文档:http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration和上面的问题我尝试修改Tooltips值的代码:

var chart_config = {
  type: 'line',
  data: {datasets: mydatasets},
  options: {
    tooltips: {
      mode: 'label',
      bodySpacing: 10,
      titleMarginBottom: 15,
      callbacks: {
        beforeLabel: function(tooltipItem, data) {
          var tooltipValue = tooltipItem.xLabel + ': ' + tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
          console.log(tooltipValue);
          return tooltipValue;
        },
      },
    },
  }
};
var chartHolder = document.getElementById("chartHolder");
var chart = new Chart(chartHolder, chart_config);

问题是它现在只返回部分工具提示项,并且控制台中存在错误:TypeError: vm.labelColors[i] is undefined.

如何格式化函数的返回值以使其没有任何错误并按指定的方式显示数据？

Answer 1

您可以使用itemSort工具提示的回调选项,例如

tooltips: {
  itemSort: (a, b, data) => b.yLabel - a.yLabel
}