【问题标题】:How to format ag-grid Pie chart labels如何格式化 ag-grid 饼图标签
【发布时间】:2021-02-28 15:38:19
【问题描述】:

我可以使用以下代码创建和配置饼图系列:

    createPieChart() {
      this.options.series = [{ 
        type: 'pie', 
        labelKey: 'os',
        angleKey: 'share',
        label: { enabled: true }, 
      }]
      this.options.legend = { enabled: false }
    },

标签看起来像这样,这意味着如果标签太长,它会溢出到图表本身和包含在其中的 div 的两侧:

我的目标是,如果标签的字符数超过 5 个,那么它只会显示 3 个字符和以下符号:...

例如,上面饼图蓝色部分的标签“Symbian qwerfrwf wfegewdfv fewdf feewdf”只会显示“Sym...”

我知道如何为我们使用格式化程序的柱形图和条形图执行此操作

     label: {
        formatter: (params) => {
          if (params.value.length > 5) {
            return params.value.substr(0, 3) + '...';
          }
          return params.value;
        },
      }

但是,对于饼图,文档(API 参考)中似乎没有可用的格式化程序 (https://www.ag-grid.com/javascript-charts-pie-series/)

如何实现我想要的饼图标签样式?

【问题讨论】:

  • 我的 ag-Chart 甜甜圈图表标签看起来很糟糕,我也遇到了同样的问题,所以我想尝试更改它们的 z-index 或以其他方式更改它们的外观。你发现了什么?
  • 缩小窗口时,您可以在plnkr.co/edit/Lm5PAvLkE5cJBGVi 看到我的问题。

标签: javascript charts formatting ag-grid


【解决方案1】:
legend: {
            enabled: true,
            item:{
              label:{
                formatter:(params)=>{
                  console.log('id',params.id)
                  console.log('itemId',params.itemId)
                  console.log('value',params.value)
                  return 'my legend goes here'
                }
              }
            }
          },

【讨论】:

  • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center
猜你喜欢
  • 2020-04-27
  • 2016-01-10
  • 2021-02-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-04-24
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多