Morris Chart的data属性键名包含空格的实现方案咨询

1. 修正带空格对象键的语法错误 #

JavaScript 语法中，包含空格、特殊字符的对象键必须用单引号或双引号包裹，你当前的报错首先是该语法问题导致的。修正引号后，Morris.js 本身支持带空格的ykeys参数配置，可直接实现需求，修正后的代码如下：

Morris.Area({
  element: 'myfirstchart',
  data: [{
      date: '2021-10-19',
      'link nameA': 2,
      'link nameB': 3,
      extra: 0
    },
    {
      date: '2021-10-20',
      'link nameA': 5,
      'link nameB': 4,
      extra: 0
    }
  ],
  xkey: 'date',
  ykeys:  ['link nameA', 'link nameB', 'extra'],
  xLabels: 'day',
  labels: ['link nameA', 'link nameB', 'extra'],
  pointSize: 3,
  fillOpacity: 0,
  pointStrokeColors: ['#00bfc7', '#00bfc7', '#9675ce'],
  behaveLikeLine: true,
  gridLineColor: '#e0e0e0',
  lineWidth: 3,
  hideHover: 'auto',
  lineColors: ['#0bc36e', '#00bfc7', '#9675ce'],
  dateFormat: function(date) {
    d = new Date(date);
    return d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear();
  },
  resize: true
});

2. 兼容旧版本的备选方案 #

如果你使用的是较早版本的 Morris.js，存在带空格ykeys的解析异常，可以采用更稳妥的实现方式，不影响最终显示效果：

• 数据中的键名使用下划线格式link_nameA、link_nameB
• ykeys参数对应修改为下划线命名的键名
• labels参数保持你需要的带空格名称即可，图表最终展示的标签仍为link nameA这类格式

内容的提问来源于stack exchange，提问作者newbie.user88