如何从风格上编辑 AG-GRID 独立图表上的轴标签？

Question

我正在与 ag-Grid 一起创建表格和图表。我已经阅读了所有关于编辑分组、堆叠和规范化柱形图和条形图轴上标签的文档，尽管有关于如何在 AG-Grid 图表上设置标签格式的信息，但没有办法（似乎）编辑它们，使它们在有多个标签时不会重叠。

例如我有下面的折线图：

x-axis 上的标签聚集在一起，因为折线图上的每个点都有一个冗长的 word/phrase 标题。我尝试在标签上添加填充（第二行）

this.options.axes = [
    { type: 'category', position: 'left' },
    { type: 'number', position: 'bottom', label: { padding: 10 } }
]

然而，这无济于事。我怎样才能做到这一点，要么标签被完全删除，要么只要轴上的标签超过一定长度，它就会缩小到只有几个字母，然后显示一个省略号？

例如在图像中，第一个标签 'Business-as-usual' 将缩小到 'Bu..'?

Answer 1

有两种方法可以做到这一点。在这种情况下，填充对您没有太大帮助。

您可以使用标签 formatter 函数将标签缩小到只有几个字母，然后显示一个省略号。
您可以使用 rotation 属性旋转标签（如果图表容器有足够的 space）到所需的角度，以便标签不要重叠。

var options = {
  container: document.getElementById('myChart'),
  data: [{
      os: 'this is pretty long word and will overlap with other labels Windows',
      share: 88.07
    },
    {
      os: 'macOS',
      share: 9.44
    },
    {
      os: 'Linux',
      share: 1.87
    },
    {
      os: 'Other hgyhtghygyh Linux ',
      share: 1.87
    },
  ],
  series: [{
    type: 'column',
    xKey: 'os',
    yKeys: ['share'],
  }, ],
  axes: [{
      type: 'category',
      position: 'bottom',
      title: {
        text: 'Desktop Operating Systems',
        enabled: false,
      },
      label: {
        formatter: function(params) {
          if (params.value.length > 10) {
            return params.value.substr(0, 6) + '...';
          }
          return params.value
        },
      }
    },
    {
      type: 'number',
      position: 'left',
      title: {
        text: 'Market Share (%)',
        enabled: false,
      },
      label: {
        formatter: function(params) {

          return params.value + '%';
        },
      },
    },
  ],
  legend: {
    enabled: false,
  },
};
var options1 = {
  container: document.getElementById('myChart1'),
  data: [{
      os: 'this is pretty long word and will overlap with other labels Windows',
      share: 88.07
    },
    {
      os: 'macOS',
      share: 9.44
    },
    {
      os: 'Linux',
      share: 1.87
    },
    {
      os: 'Other hgyhtghygyh Linux ',
      share: 1.87
    },
  ],
  series: [{
    type: 'column',
    xKey: 'os',
    yKeys: ['share'],
  }, ],
  axes: [{
      type: 'category',
      position: 'bottom',
      title: {
        text: 'Desktop Operating Systems',
        enabled: false,
      },
      label: {
        rotation: 90
      }
    },
    {
      type: 'number',
      position: 'left',
      title: {
        text: 'Market Share (%)',
        enabled: false,
      },
      label: {
        formatter: function(params) {

          return params.value + '%';
        },
      },
    },
  ],
  legend: {
    enabled: false,
  },
};
agCharts.AgChart.create(options);
agCharts.AgChart.create(options1);

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    var __basePath = './';
  </script>
  <style media="only screen">
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }
    
    html {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      overflow: auto;
    }
    
    body {
      padding: 1rem;
      overflow: auto;
    }
  </style>
  <script src="https://unpkg.com/ag-charts-community@2.1.0/dist/ag-charts-community.min.js"></script>
</head>

<body>
  <div id="myChart" style="height: 100%;"></div>
  <div id="myChart1" style="height: 100%;"></div>

</body>

</html>

如何从风格上编辑 AG-GRID 独立图表上的轴标签？

How to stylistically edit axes labels on AG-GRID standalone charts?

charts

label

axes

styling

ag-grid