ツールチップの順序を元に戻す

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; 
    }, 
    ... 
} 

をツールチップ値の順序を逆にすることができます