如何设置AgGrid中Sparklines的Y轴最小/最大边界并统一多图表Y轴?
实现AgGrid中Sparklines统一Y轴范围的方案
完全可行,你可以通过配置Sparkline的轴属性来硬编码统一的Y轴最小/最大值,具体操作如下:
- 在列定义的
cellRendererParams.sparklineOptions中,添加axis.yAxis配置项,直接指定min和max数值 - 所有需要统一Y轴的Sparkline列,设置相同的
yAxis.min和yAxis.max值即可
示例代码如下:
const columnDefs = [ { headerName: '月度营收', field: 'revenueData', cellRenderer: 'agSparklineCellRenderer', cellRendererParams: { sparklineOptions: { type: 'line', axis: { yAxis: { min: 0, max: 15000 } } } } }, { headerName: '用户增长', field: 'userGrowthData', cellRenderer: 'agSparklineCellRenderer', cellRendererParams: { sparklineOptions: { type: 'column', axis: { yAxis: { min: 0, max: 15000 // 和上一列保持一致的Y轴范围 } } } } } ];
配置完成后,所有Sparklines会基于你设定的固定Y轴范围渲染,保证数据可视化的一致性。
内容的提问来源于stack exchange,提问作者MYK
相关产品推荐
相关产品推荐

