ChartJS:限制坐标轴上标签的长度并在悬停时显示工具提示?

eni9jsuy  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(235)

所以这个问题是有太长的动态图表标签。有没有办法设置标签长度的限制,并在悬停时显示工具提示?

  1. xAxes: [{
  2. stacked: type === 'stacked',
  3. scaleLabel: {
  4. display: true,
  5. labelString: interval ? `${i18n.t('chart.time')} (${i18n.t('chart.' + interval)})` : field.key
  6. },
  7. ticks: {
  8. autoSkipPadding: 11,
  9. maxRotation: 90,
  10. minRotation: 0
  11. }
  12. }]

当前输出如下所示。

当前解决方案xD刚刚修改了键的最大长度为18,并制作了一个静态排除列表。

  1. const excludes = ['maakond', 'Maakond', 'district', 'District',
  2. 'province', 'Province', 'county', 'County'];
  3. data.district.data.forEach(el => {
  4. excludes.forEach(ex => {
  5. el.key = el.key.replace(ex, '');
  6. });
  7. if(el.key.length > 18) {
  8. el.key = el.key.substring(0, 20);
  9. el.key = el.key + '.';
  10. }
  11. });
ttcibm8c

ttcibm8c1#

请使用Chart.scaleService.updateScaleDefaults

  1. Chart.scaleService.updateScaleDefaults('category', {
  2. ticks: {
  3. callback: function (tick) {
  4. return tick.substring(0, 3);
  5. }
  6. }
  7. });

并将此代码添加到xAxes选项中。

  1. tooltips: {
  2. callbacks: {
  3. title: function (tooltipItems, data) {
  4. return data.labels[tooltipItems[0].index]
  5. }
  6. }
  7. }
展开查看全部

相关问题