使用Morris图表时无法通过JavaScript JSON获取数组长度的问题

嘿，我懂你碰到的这个麻烦了——Morris.js的ykeys并不支持直接用sessions.length这种点语法来获取数组长度，原因很直白：它会把这个字符串直接当作数据对象的属性名去查找，而不是解析成“先找sessions数组，再取它的length属性”。所以它在你的数据项里找不到名为sessions.length的属性，自然就没数据显示啦。

这里有个简单靠谱的解决方案，先预处理你的数据，给每个对象加一个专门存数组长度的属性，再用这个属性配置图表就行：

步骤1：预处理JSON数据 #

把从API拿到的原始数据做个转换，给每个条目新增一个sessions_count属性，值就是对应sessions数组的长度：

// 假设你的原始数据存在rawData变量里（就是你拿到的那串JSON数组）
const processedData = rawData.map(item => {
  return {
    ...item, // 保留原有所有属性
    sessions_count: item.sessions.length // 新增存储数组长度的属性
  };
});

步骤2：修改Morris图表配置 #

现在用新的sessions_count属性替换原来的sessions.length作为ykeys的值：

var chart = Morris.Bar({
  element: 'myfirstchart',
  data: processedData, // 使用预处理后的新数据
  xkey: ['cert_status'],
  ykeys: ['sessions_count'],
  labels: ['Number of Sessions'] // 标签可以改得更直观些
});

这样处理后，图表就能正常显示每个cert_status对应的session数量了——比如第一个“Testing”条目会显示2，其他条目显示0，完全匹配你的数据情况。

内容的提问来源于stack exchange，提问作者jgillespie484848