TruncatingcanvaslabelsinChartJSwhilekeepingthefulllabelvalueinthetooltips

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

Example: http://jsfiddle.net/norbiu/aqa8w19d/4/

我正在尝试截断显示在图表下方的标签,同时保持悬停在条形图上时显示在工具提示中的标签.问题是工具提示和画布标签都从labels数据结构中的数组中获取它们的值.截断值将显示两个位置的缩短版本.

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

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

在Chart JS V2中,您可以截断传递选项对象的标签.您也可以自定义工具提示.

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 + ' €';
            }
        }
    },
}