ag 网格：没有可用于绘制图表的数据答案

【问题标题】：aggrid: No data available to be chartedag 网格：没有可用于绘制图表的数据
【发布时间】：2021-11-11 18:44:29
【问题描述】：

我有一个关于 ag-grid 企业的新手问题（使用 v23.0.0）。当我创建一个简单的网格，然后执行这些用户操作时：

右键单击数字单元格
选择图表范围、列、分组（实际上，所有图表选项都不起作用...）

我收到No data available to be charted.

这在演示 (https://www.ag-grid.com/example.php) 中运行良好，但在我的应用程序中却不行。我需要做什么才能让数据显示在图表中？

我正在使用 Flask Web 应用程序框架来托管我的 Python 代码。这是我的 HTML/JavaScript 代码：

agpoc.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="{{url_for('static', filename='ag-grid-enterprise.js')}}"></script>
    <script src="{{url_for('static', filename='agpoc.js')}}"></script>
</head>
<body>
    <div id="salesGrid" style="height: 200px; width:500px;" class="ag-theme-balham"></div>
</body>
</html>

agpoc.js：

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#salesGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

var columnDefs = [
    {headerName: "brand", field: "brand"},
    {headerName: "sales", field: "sales", type: "numericColumn"}
];
var rowData = [
    {"brand": "Brand X", "sales": "270.12"},
    {"brand": "Brand Y", "sales": "400.89"}
];

var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  enableCharts: true,
  enableRangeSelection: true,
};

我已经对此进行了调试，似乎ag-grid-enterprise.js 中的以下代码：

ChartDataModel.prototype.getSelectedValueColState()

返回一个空列表。我不明白 example.js 在做什么，我没有这样做。

有人指点吗？

谢谢

【问题讨论】：

用数字数据试试吧。 "sales": 270.12.
很好，成功了！谢谢@thirtydot。
@thirtydot - 请发表您的评论作为答案，这样其他人可能会从中受益:)
@EliranMalka：我真的不再在这里写答案了，我对 Stack Exchange 不满意。你可以自己写一个完整的答案。
那太糟糕了...找到任何好的替代品了吗？ :)

标签： ag-grid

【解决方案1】：

所以这可能有点令人困惑。在您的特定示例中，您的 sales 是 strings 而不是 numbers。

要使默认情况下正常工作，您必须确保每一行都有一个可用的数值。例如，拥有undefined 或null 将导致no data available issue。

要解决这个问题，您需要在您感兴趣的特定列的 colDef 上定义 chartDataType。

这是一个示例，我在一行前面加上age 作为null，但由于将chartDataType 定义为series，它仍然有效

https://plnkr.co/edit/nyzxLY5tntyURkK3

编辑* 这看起来像是一个即将修复的错误：

If chartDataType in the column definition is not provided, AG Grid infers whether the data is numeric (for plotting as a series values), or not (for plotting as category values) based on the first row in the column. If the first row in this column doesn't contain a numeric value, it's treated as a category value which cannot be charted, as described here:
https://www.ag-grid.com/javascript-data-grid/integrated-charts-range-chart/#inferred-by-the-grid

This is why please set chartDataType='series' on columns you want to chart in order to avoid cases where there's a null/undefined value in the first row, which infers the column as a category column and prevents it from charting.

答案现在仍然适用。

【讨论】：