Question

我正在尝试在XAxis上对标签文字进行子串，因为它们太长了。当鼠标悬停在条形图上时，也会显示标签。问题是当我对子标签进行子标记时，文本的两面都受到了影响，这是我不想要的。我只想在XAxis上对文本进行子串。这可能吗？

以下是我正在使用的代码：

var memX = [];
var memY = [];

$(data.mem).each(function() {
    memX.push(splitLabel(this.name));
    memY.push(this.cnt);
});

var memData = { 
    labels: memX, 
    datasets: [{ label:'Members', data: memY, borderWidth:1, backgroundColor:'rgba(125, 199, 85, 0.7)' }] };

    new Chart(document.getElementById(id + '_members'), { 
    type: 'bar', 
    data: memData, 
    options: { 
        responsive: true, 
        scales: { 
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        animation: {
            duration: 500
        }
    }
});

这是屏幕截图：

Answer 1

是的！这是可能的。

从给出的屏幕截图中可以看出，您使用的是多行标签。如果是这种情况，您可以使用以下x轴刻度和工具提示回调函数来修剪x轴上的标签并分别在工具提示上显示完整的文本。

x轴勾选回调 （用于修剪标签）

xAxes: [{
   ticks: {
      callback: function(label) {
         return label[0];
      }
   }
}]

工具提示标题回调 （用于显示完整文字）

tooltips: {
   callbacks: {
      title: function(t, d) {
         return d.labels[t[0].index];
      }
   }
}

工作示例：

var ctx = canvas.getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: [
         ['Corporate', 'Membership', '(Active)'],
         ['Group', 'Membership', '(Active)'],
         ['Muncipal', 'Level 2', '(300000-499999)', '(Active)'],
         ['Muncipal', 'Level 5', '(100000-399999)', '(Active)'],
         ['University', 'Membership', '(Active)']
      ],
      datasets: [{
         label: 'Members',
         data: [2, 4, 1, 3, 5],
         backgroundColor: 'rgba(2, 215, 6, 0.3)',
         borderColor: 'rgba(2, 215, 6, 0.4)',
      }]
   },
   options: {
      scales: {
         xAxes: [{
            ticks: {
               callback: function(label) {
                  return label[0];
               }
            }
         }],
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      },
      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="canvas"></canvas>

限制标签测试

1 个答案: