ChartJS - 设置与x轴描述不同的悬停文本

我正在使用图表来显示条形图中的一些数据。标签很长，所以我剪了它们。不过，我想让工具提示（在悬停时）的文本成为原始文本。我可以通过默认的chartjs配置来实现吗？ChartJS - 设置与x轴描述不同的悬停文本

我使用以下方法来生成图表：

function DrawChart(canvasID, remoteFields, remoteData, remoteColors, remoteBorderColors) { 
    var ctx = document.getElementById(canvasID).getContext('2d'); 

    var orig = remoteFields; 
    var maxLabelLength = 20; 
    for(var i = 0; i < remoteFields.length; i++) { 
     if(remoteFields[i].length > maxLabelLength) { 
      remoteFields[i] = remoteFields[i].substring(0,maxLabelLength) + "..."; 
     } 
    } 
    var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
    labels: remoteFields, 
     datasets: [{ 
      data: remoteData, 
      backgroundColor: remoteColors, 
      borderColor: remoteBorderColors, 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true, 
        stepSize: 1 
       } 
      }] 
     }, 
     responsive: true, 
     maintainAspectRatio: false, 
     legend: { 
     display: false 
    } 
    } 
}); 
}

来源

2017-06-04 Marcel

你可以做到这一点使用蜱回调功能（修剪x轴标签）和tooltips callback功能（以dispaly原文字工具提示）

var ctx = document.getElementById('c').getContext('2d'); 
 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: ['January', 'February', 'March', 'April', 'May'], 
 
     datasets: [{ 
 
     data: [1, 2, 3, 4, 5], 
 
     backgroundColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'], 
 
     borderColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'], 
 
     borderWidth: 1 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     scales: { 
 
     xAxes: [{ 
 
      ticks: { 
 
       callback: function(t) { 
 
        var maxLabelLength = 3; 
 
        if (t.length > maxLabelLength) return t.substr(0, maxLabelLength) + '...'; 
 
        else return t; 
 
       } 
 
      } 
 
     }], 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true, 
 
       stepSize: 1 
 
      } 
 
     }] 
 
     }, 
 
     legend: { 
 
     display: false 
 
     }, 
 
     tooltips: { 
 
     callbacks: { 
 
      title: function(t, d) { 
 
       return d.labels[t[0].index]; 
 
      } 
 
     } 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="c" width="350" height="200"></canvas>

来源

2017-06-04 15:24:50

太棒了！谢谢！ – Marcel

ChartJS - 设置与x轴描述不同的悬停文本

回答

相关问题