我用chart.js创建了一个图表。有一些选项,其中一个选项“responsive:true”提供了响应视图。问题是当我第一次加载带有数据的图形时,y-ax标签溢出边界并显示在下面的屏幕上。当我更改视图时,y-ax标签显示为溢出隐藏,并且在标签末尾显示elepsis。另外,我需要为标签添加一个自定义阳台,如何才能做到这一点?更改视图前:视图更改后:
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 ? '...' : ''); } }
1条答案
按热度按时间yrwegjxp1#
这是我的密码:
在这里,我在带有回调的选项中添加了属性“ticks”,该属性将值限制为8个字母,并在末尾添加省略号。此外,我还添加了一个自定义过滤器。