截断ChartJS中的画布标签，同时将完整标签值保留在工具提示中 [英] Truncating canvas labels in ChartJS while keeping the full label value in the tooltips

问题描述

我有一些条形图带有很长的标签，它们会影响图表的大小。

I have some bar charts that have really long labels and they affect the size of the charts.

示例： http://jsfiddle.net/norbiu/aqa8w19d/4/

我试图截断图表下方显示的标签，同时将鼠标悬停在栏上时将显示在工具提示中的标签保留下来。问题在于工具提示和画布标签都从数据结构中的 labels 数组中获取值。删减值会在两个位置都显示缩短的版本。

I'm trying to truncate the labels that show up under the chart while keeping the label that shows up in the tooltips when hovering over a bar. The problem is that the tooltips and the canvas labels both get their values from the labels array in the data structure. Truncating the value will show the shortened version in both locations.

sales: ko.observable({
    labels: ['A really really long label', 'Another long labe', 'A third label that is long', 'Q4', 'Q5', 'Q6'],
    datasets: [{
        label: 'Helados',
        fillColor: '#152491',
        data: [70, 32, 6, 23, 63, 43]
    }]
}),

文档没有任何内容。有想法吗？

The documentation has nothing on this. Any ideas?

推荐答案

在Chart JS V2中，您可以截断传递options对象的标签。
也可以自定义工具提示。

In Chart JS V2 you can truncate labels passing the options object. Also you can customize the tooltips.

options:{
    scales: {
        xAxes: [{
            ticks: {
                callback: function(value) {
                    return value.substr(0, 10);//truncate
                },
            }
        }],
        yAxes: [{}]
    },
    tooltips: {
        enabled: true,
        mode: 'label',
        callbacks: {
            title: function(tooltipItems, data) {
                var idx = tooltipItems[0].index;
                return 'Title:' + data.labels[idx];//do something with title
            },
            label: function(tooltipItems, data) {
                //var idx = tooltipItems.index;
                //return data.labels[idx] + ' €';
                return tooltipItems.xLabel + ' €';
            }
        }
    },
}

这篇关于截断ChartJS中的画布标签，同时将完整标签值保留在工具提示中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！