默认情况下如何设置或显示所有工具提示文本而不悬停

Question

[我正在一个项目中，我正在使用Charts.js来显示图表，在这里，我想在鼠标悬停在该栏上时默认显示每个栏顶部的所有栏值（使用栏聊天）。它显示了价值，但是默认情况下有没有显示该工具提示的任何内容

[下面是小提琴的例子，在这里，我要在条形图上默认显示60,30,40作为默认值，而无需将鼠标悬停在其上。

在上面的屏幕快照中，我尝试将所有工具提示默认设置为，但是由于使用了3​​个图表，因此它在所有图表中都显示了工具提示，但是我只想将工具提示添加到条形图中，我知道这有点棘手，但是有将以某种方式可以解决我的问题。请指导我，这是我的JS代码片段

getchart();
function getchart() {
$("#barChart").remove();
    const decimals = 3;
    $(".chart").append("<canvas id='barChart' width='692' height='346'></canvas>");
    var ctx = document.getElementById("barChart");

    Chart.pluginService.register({
      beforeRender: function(chart) {
        if (chart.config.options.showAllTooltips) {
          chart.pluginTooltips = [];
          chart.config.data.datasets.forEach(function(dataset, i) {
            chart.getDatasetMeta(i).data.forEach(function(sector, j) {
                console.log(chart);
                chart.pluginTooltips.push(new Chart.Tooltip({
                    _chart: chart.chart,
                    _chartInstance: chart, 
                    _data: chart.data,
                    _options: chart.options.tooltips,
                    _active: [sector]
                  }, chart));
            });
          });
      }
        chart.options.tooltips.enabled = false;   
      },

      afterDraw: function(chart, easing) {

        if (chart.config.options.showAllTooltips) {
          if (!chart.allTooltipsOnce) {
            if (easing !== 1)
              return;
            chart.allTooltipsOnce = true;
          }

          chart.options.tooltips.enabled = true;
          Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
            tooltip.initialize();
            tooltip.update();
            tooltip.pivot();
            tooltip.transition(easing).draw();
          });
          chart.options.tooltips.enabled = false;
        }
      }
    })

    var barChart;
       barChart = new Chart(ctx, {
       type: 'bar',
      data: {
        labels: ['30', '45', '60', '90', '120', '120+'],
        datasets: [{
          type: 'bar',
          label: 'Receivable',
          data: [730, 492.5, 120, 4732.5, 2760.85, 0],
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }, {
          type: 'line',
          label: 'Past Due',
          data: [1500, 1500, 1500, 1500, 1500, 1500],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255,99,132,1)',
          borderWidth: 1
        }, {
          type: 'line',
          label: 'Invoice',
          data: [1000, 1000, 1000, 1000, 1000, 1000],
          backgroundColor: 'rgba(75, 00, 150, 0.2)',
          borderColor: 'rgba(75, 00, 150,1)',
          borderWidth: 2
        }]
      },
      options: {
        scales: {
          xAxes: [{
            display: true,
            stacked: true,
            scaleLabel: {
              display: true,
              labelString: 'Days'
            },
          }],
          yAxes: [{
            display: true,
            stacked: true,
            scaleLabel: {
              display: true,
              labelString: 'Dollar Amount'
            },
            ticks: {
              beginAtZero: true,
            }
          }, {
            id: 'invoice-amount',
            display: false,
            stacked: false,
            scaleLabel: {
              display: false,
              labelString: 'Dollar Amount'
            },
            ticks: {
              beginAtZero: true,
            }
          }]
        },
        showAllTooltips: true,
      }
    });       
}

Answer 1

有几个插件可以使用...

1. chartjs-plugin-labels
2. chartjs-plugin-datalabels

请参阅以下工作片段，使用上面的2 ....

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [
      "Men",
      "Women",
      "Unknown"
    ],
    datasets: [
        {
        label: 'Sweden',
        data: [60, 40, 20],
        backgroundColor: [
          'rgba(158, 216, 202, 0.75)',
          'rgba(255, 150, 162, 0.75)',
          'rgba(160, 160, 160, 0.75)'
        ]
      },
      {
        label: 'Netherlands',
        data: [40, 70, 10],
        backgroundColor: [
          'rgba(158, 216, 202, 0.5)',
          'rgba(255, 150, 162, 0.5)',
          'rgba(160, 160, 160, 0.5)'
        ]
      },
       {
        data: [33, 33, 34],
        backgroundColor: [
          'rgba(158, 216, 202, 0.25)',
          'rgba(255, 150, 162, 0.25)',
          'rgba(160, 160, 160, 0.25)'
        ]
      }
    ]
  },
  options: {
    tooltips: {
      callbacks: {
        title: function(tooltipItems, data) {
          return '';
        },
        label: function(tooltipItem, data) {
          var datasetLabel = '';
          var label = data.labels[tooltipItem.index];
          return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        }
      }
    },
    plugins: {
      datalabels: {
        anchor: 'end'
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="myChart"></canvas>