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

问题描述

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

谢谢.

我当前的 Chartjs 代码:

var ctx = $("#myChart");var label = ctx.data('clabel').split(',');var val = ctx.data('cval').split(',');var myChart = 新图表(ctx，{类型:'线'，数据: {标签:标签，数据集:[{标签:每日资本"，数据:val，背景颜色: ['rgba(0, 153, 34, 0.5)',],边框颜色: ['rgba(0, 153, 34, 1);',],边框宽度:2}]},选项: {响应:真实，保持纵横比:假，传奇: {显示:假，},动画片: {duration: 0,//一般动画时间},悬停:{动画持续时间:0，},responseAnimationDuration: 0,//调整大小后的动画持续时间元素:{线: {张力:0，//禁用贝塞尔曲线},},工具提示:{回调:{标签:功能(工具提示项目，数据){返回 '​​£' + tooltipItem.yLabel;},标题:功能(工具提示项目，数据){返回 '​​';},}},尺度:{y轴:[{刻度:{beginAtZero: 真}}]}}});

希望有人能帮忙.提前谢谢您

解决方案

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

onAnitmationComplete 函数调用 showToolTip 方法来像悬停事件一样显示 tooltips.

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

var 选项 = {tooltipTemplate: "<%= value %>",显示工具提示:真，onAnimationComplete:函数(){this.showTooltip(this.datasets[0].points, true);},工具提示事件:[]}

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

var data_line = {标签:[一月"、二月"、三月"、四月"、五月"、六月"、七月"]，数据集:[{标签:我的第一个数据集"，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)",数据:[65, 59, 80, 81, 56, 55, 40]}]};变量选项 = {tooltipTemplate: "<%= value %>",显示工具提示:真，onAnimationComplete:函数(){this.showTooltip(this.datasets[0].points, true);},工具提示事件:[]}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>

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.

Thank you.

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

解决方案

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

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

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屋！