如何总是在没有鼠标悬停的情况下在chartjs中显示标签？ [英] how to always show label in chartjs without mouseover?

问题描述

我正在使用Chart Js的最新版本。我需要始终在图表中显示标签（没有鼠标悬停在上面）。可能吗？如果是，那么请为我提供示例代码。

I am using latest version of Chart Js. I need to always show label in chart (without mouse over). Is it possible? If yes, then please help me with working example code.

谢谢。

我当前的Chartjs代码：

My Current Chartjs code:

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
                }
            }]
        }
    }       
});

我希望有人能提供帮助。预先谢谢

I hope someone can help. Thank you in advance

推荐答案

可以通过添加选项解决此问题。 onAnimationComplete 和 tooltipevents 。

This could be solved by adding the options onAnimationComplete and tooltipevents.

onAnitmationComplete 函数调用 showToolTip 方法来显示工具提示像悬停事件一样。

onAnitmationComplete functions calls the showToolTip method to show the tooltips like a hover event does.

通常 tooltipevents 被定义为显示 tooltips ，但是在这里需要传递一个空数组。请查看下面的小提琴示例以获取折线图。

Usually tooltipevents are define to show tooltips but here an empty array need to be passed. Check the below fiddle example for line chart.

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

  showTooltips: true,

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

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

Note : This approach does not support multi data-sets in line and bar charts, but does support multi data-sets in pie charts

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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="chartContainer">
  <canvas id="chart3" width="500" height="500"></canvas>
</div>

这篇关于如何总是在没有鼠标悬停的情况下在chartjs中显示标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！