Chart.js: 如何对图中的工具提示进行排序

Question

我生成了一个图表，其中包含 3 组数据：

底部
中间
顶部

每个柱状图在柱状图的顶部都有最高值，然后是中间值，然后是底部值。

当Chart.js显示工具提示时，我首先有底部值，然后是中间值和顶部值。所以，它和栏中的顺序相反。

为了显示我添加此代码的值

var stackedBarChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
        mode: 'label',
        callbacks: {
            label: function (tooltipItem, data) {
                return data.datasets[tooltipItem.datasetIndex].label + ": " + 
                       tooltipItem.yLabel;
            }
        }
    }
}

是否可以订购工具提示列表？

Answer 1

在tooltiplabel回调中，我们可以选择任意索引显示。
在您的回调中，您正在显示传递给回调的索引。

tooltipItem.datasetIndex

相反，让我们显示相反的顺序...

data.datasets.length - 1 - tooltipItem.datasetIndex

但我们还必须为 labelColor、
添加回调为特定标签显示正确的颜色框。

请参阅以下工作片段...

var chart_canvas = document.getElementById('myChart');
var stackedLine = new Chart(chart_canvas, {
  type: 'bar',
  data: {
    labels: ['A'],
    fill: true,
    datasets: [
      {
        label: 'Low',
        data: [67.8],
        backgroundColor: '#D6E9C6'
      },
      {
        label: 'Moderate',
        data: [20.7],
        backgroundColor: '#FAEBCC'
      },
      {
        label: 'High',
        data: [11.4],
        backgroundColor: '#EBCCD1'
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
      mode: 'label',
      callbacks: {
        labelColor: function (tooltipItem, data) {
          return {backgroundColor: data.data.datasets[data.data.datasets.length - 1 - tooltipItem.datasetIndex].backgroundColor};
        },
        label: function (tooltipItem, data) {
          return data.datasets[data.datasets.length - 1 - tooltipItem.datasetIndex].label + ": " + data.datasets[data.datasets.length - 1 - tooltipItem.datasetIndex].data[tooltipItem.index];
        }
      }
    },
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Chart.js: 如何对图中的工具提示进行排序

Chart.js: how to order the tool tips in the graph

javascript

charts