使用 refreshCells 重新生成图表时更改 Ag-Grid 中的字幕

Question

我正在使用 Ag-Grid React，这是我的新手。我有一个 drop-down 允许您通过 refreshCells 函数切换到从 AWS 调用的不同数据集到折线图中。当您 select 来自 drop-down 的内容时，图表刷新正常，但我还想更改折线图的副标题以匹配正在提取的数据（selected drop-down 价值）。这可能与页面初始加载后的 refreshCells 函数有关吗？

Answer 1

在定义 gridOptions 对象时定义 processChartOptions，如下所示。

只要由于基础数据的变化而重新绘制图表，就会调用此方法。您可以使用 params 对象动态设置 title/subtitle 值。

function processChartOptions(params) {
  var options = params.options;

  console.log('chart options:', options);

  options.title.enabled = true;
  options.title.text = 'your title here';
  options.title.fontStyle = 'italic';
  options.title.fontWeight = '600';
  options.title.fontSize = 18;
  options.title.fontFamily = 'Impact, sans-serif';
  options.title.color = '#414182';

  options.subtitle.enabled = true;
  options.subtitle.text = 'your subtitle here';
  options.subtitle.fontSize = 14;
  options.subtitle.fontFamily = 'Monaco, monospace';
  options.subtitle.color = 'rgb(100, 100, 100)';

  return options;
}

这里是 demo.

使用 refreshCells 重新生成图表时更改 Ag-Grid 中的字幕

Changing the subtitle in Ag-Grid react when you use refreshCells to regenerate a chart

ag-grid

ag-grid-react