如何在没有鼠标悬停的情况下始终在chartjs中显示标签？

Question

我正在使用最新版本的 Chart Js。我需要始终在图表中显示标签（没有鼠标悬停）。是否可以？如果是，请帮助我编写示例代码。

谢谢你。

我当前的 Chartjs 代码：

var ctx = $("#myChart");
var label = ctx.data('clabel').split(',');
var val = ctx.data('cval').split(',');


var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: label,
        datasets: [{
            label: 'Daily Capital',
            data: val,
            backgroundColor: [
                'rgba(0, 153, 34, 0.5)',
            ],
            borderColor: [
                'rgba(0, 153, 34, 1);',
            ],
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            display: false,
        },
        animation: {
            duration: 0, // general animation time
        },
        hover: {
            animationDuration: 0, 
        },
        responsiveAnimationDuration: 0, // animation duration after a resize
        elements: {
            line: {
                tension: 0, // disables bezier curves
            },
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data){
                    return '£' + tooltipItem.yLabel;
                },
                title: function(tooltipItem, data){
                    return '';
                },
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }       
});

我希望有人能帮帮忙。先感谢您

Answer 1

这可以通过添加options onAnimationComplete和来解决tooltipevents。

onAnitmationComplete函数调用该showToolTip方法来显示，tooltips就像悬停事件一样。

通常tooltipevents是定义来显示tooltips，但这里需要传递一个空数组。检查下面的折线图小提琴示例。

var options = {
  tooltipTemplate: "<%= value %>",

  showTooltips: true,

  onAnimationComplete: function() {
    this.showTooltip(this.datasets[0].points, true);
  },
  tooltipEvents: []
}

注意：此方法不支持折线图和条形图中的多数据集，但支持饼图中的多数据集

var options = {
  tooltipTemplate: "<%= value %>",

  showTooltips: true,

  onAnimationComplete: function() {
    this.showTooltip(this.datasets[0].points, true);
  },
  tooltipEvents: []
}

var data_line = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(220,220,220,1)",
    pointColor: "rgba(220,220,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [65, 59, 80, 81, 56, 55, 40]
  }]
};


var options = {
  tooltipTemplate: "<%= value %>",

  showTooltips: true,

  onAnimationComplete: function() {
    this.showTooltip(this.datasets[0].points, true);
  },
  tooltipEvents: []
}

var context = $('#chart3').get(0).getContext('2d');
var chart = new Chart(context).Line(data_line, options);