chart.js - 恢复工具提示顺序

Question

我正在使用 Chart.js 创建一个完整的 % 堆积面积图。但是，我在文档中找不到如何反转工具提示中显示值的顺序。

这是我得到的:

如您所见，顶部区域(蓝色)是工具提示中的底部区域。

我的代码:

var ctx = document.getElementById("EvolutionBreackdownsChart");
var EvolutionBreackdownsChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["April", "May", "June", "July", "August", "September", "October", "November", "December", "January", "February", "March", "April"],
      datasets: [{
        label:'O',
        data: [20, 21, 19, 17, 22, 25, 23, 18, 15, 16, 17, 19, 20],
        fill: 'origin',
        backgroundColor: 'rgba(255, 148, 31, 0.2)',
        borderWidth:0.1,
        borderColor: 'rgba(255, 148, 31, 0.55)',
        pointRadius:3,
        pointBackgroundColor: 'rgba(255, 148, 31, 0.2)',
        pointBorderColor: 'rgba(255, 148, 31, 0.55)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'A',
        data: [30, 28, 29, 32, 32, 31, 25, 29, 29, 30, 31, 28, 29],
        fill: '-1',
        backgroundColor:'rgb(255, 148, 31, 0.35)',
        borderWidth:0.1,
        borderColor: 'rgb(255, 148, 31, 0.75)',
        pointRadius:3,
        pointBackgroundColor: 'rgb(255, 148, 31, 0.35)',
        pointBorderColor: 'rgb(255, 148, 31, 0.75)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'M',
        data: [10, 12, 13, 10, 11, 12, 11, 10, 12, 11, 11, 10, 9],
        fill: '-1',
        backgroundColor:'rgb(255, 148, 31, 0.5)',
        borderWidth:0.1,
        borderColor: 'rgb(255, 148, 31, 0.9)',
        pointRadius:3,
        pointBackgroundColor: 'rgb(255, 148, 31, 0.5)',
        pointBorderColor: 'rgb(255, 148, 31, 0.9)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'R',
        data: [28, 29, 32, 31, 27, 25, 31, 33, 28, 33, 31, 30, 32],
        fill: '-1',
        backgroundColor:'rgba(255, 148, 31, 0.60)',
        borderWidth:0.1,
        borderColor: 'rgba(255, 148, 31, 1)',
        pointRadius:3,
        pointBackgroundColor: 'rgba(255, 148, 31, 0.60)',
        pointBorderColor: 'rgba(255, 148, 31, 1)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      }, {
        label:'B',
        data: [12, 10, 7, 10, 8, 7, 10, 10, 16, 10, 10, 13, 10],
        fill: '-1',
        backgroundColor:'rgba(3, 169, 244, 0.25)',
        borderWidth:0.1,
        borderColor: 'rgba(3, 169, 244, 1)',
        pointRadius:3,
        pointBackgroundColor: 'rgba(3, 169, 244, 0.25)',
        pointBorderColor:  'rgba(3, 169, 244, 1)',
        pointHoverRadius:5,
        pointHoverBorderWidth:1,
        lineTension:0,
      },],
    },
    options: {
      scales: {
          yAxes: [{
            stacked:true,
            gridLines: {
              display:false,
            },
            ticks: {
              beginAtZero:true,
              fontColor:'#999999',
              fontFamily:"'Source Sans Pro', sans-serif",
              fontSize:10,
            },
          }],
          xAxes: [{
            ticks:{
              fontColor:'#999999',
              fontFamily:"'Source Sans Pro', sans-serif",
              fontSize:10,
              maxTicksLimit: 15,
              callback: function(tick) {
                  var characterLimit = 4;
                  if (tick.length >= characterLimit) {
                      return tick.slice(0, tick.length).substring(0, characterLimit - 1).trim();;
                  }
                  return tick;
              },
            },
          }]
      },
      legend: {
        display: false,
      },
      tooltips: {
        backgroundColor:'rgba(3, 169, 244, 0.75)',
        bodyFontFamily:"'Source Sans Pro', sans-serif",
        titleFontStyle:"normal",
        bodyFontFamily:"'Source Sans Pro', sans-serif",
        displayColors: true,
        cornerRadius:0,
        intersect:false,
        mode: 'x-axis',
        callbacks: {
            title: function(tooltipItem){
                return this._data.labels[tooltipItem[0].index];
              }
          },
      },
    }
});

你能帮忙吗？

Answer 1

您可以使用 itemSort 反转工具提示值的顺序函数，像这样...

tooltips: {
   itemSort: function(a, b) {
      return b.datasetIndex - a.datasetIndex;
   },
   ...
}