如何修复使用chart.js创建的图形中的溢出数据标签?

2cmtqfgy  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(291)

我用chart.js创建了一个图表。有一些选项,其中一个选项“responsive:true”提供了响应视图。问题是当我第一次加载带有数据的图形时,y-ax标签溢出边界并显示在下面的屏幕上。当我更改视图时,y-ax标签显示为溢出隐藏,并且在标签末尾显示elepsis。另外,我需要为标签添加一个自定义阳台,如何才能做到这一点?更改视图前:

视图更改后:

yrwegjxp

yrwegjxp1#

这是我的密码:

drawWordsChart: function(placeholder, data, options = {}) {
        console.log('drawWordsChart', data);
        var sortable = [];
        for (var word in data) {
            sortable.push([data[word].text, data[word].weight]);
        }
        sortable.sort(function(a, b) {
            return b[1] - a[1];
        });
        sortable = sortable.slice(0, 20);

        let labels = [];
        let values = [];
        let colors = [], intense = 1;
        angular.forEach(sortable, (elem, key) => {
            colors.push('rgb(30, 144, 255,' + (intense - key / 20) + ')');
            labels.push(elem[0]);
            values.push(elem[1]);
        });

        var horizontalBarChartData = {
            labels: labels,
            datasets: [{
                label: options.label || 'weight',
                backgroundColor: colors,
                borderColor: colors,
                data: values
            }]

        };

        const ctx = document.getElementById(placeholder).getContext('2d');
        const myHorizontalBar = new Chart(ctx, {
            type: options.type || 'horizontalBar',
            data: horizontalBarChartData,
            options: {
                elements: {
                    rectangle: {
                        borderWidth: 1,
                    }
                },
                responsive: true,
                legend: {
                    position: 'right',
                    display: false
                },
                scales: {
                    yAxes: [{
                        barPercentage: 0.1,
                        barThickness: 10,
                        maxBarThickness: 10,
                        minBarLength: 2,
                        gridLines: {
                            offsetGridLines: true
                        },
                        ticks: {
                            callback: function(value, index, values) {
                                return $filter('limitTo')(value, 8) + (value.length > 8 ? '...' : '');
                            }
                        }
                    }]
                },
                maintainAspectRatio: false
            }
        });
        return myHorizontalBar;
    }

在这里,我在带有回调的选项中添加了属性“ticks”,该属性将值限制为8个字母,并在末尾添加省略号。此外,我还添加了一个自定义过滤器。

ticks: {
 callback: function(value, index, values) {
  return $filter('limitTo')(value, 8) + (value.length > 8 ? '...' : '');
 }
}

相关问题