为高图表表示格式化数据答案

【问题标题】：Format data for high charts representation为高图表表示格式化数据
【发布时间】：2020-04-07 16:38:38
【问题描述】：

我有以下格式的数据。我想绘制一个折线图来比较 2017 年和 2018 年所有月份的数据。

const listItems = [{
    "id": 1,
    "total": 21.15,
    "dat": "2017-10-21T08:32:36.000Z"
  },
  {
    "id": 2,
    "total": 22,
    "dat": "2017-11-24T13:46:16.000Z"
  },{
    "id": 3,
    "total": 11,
    "dat": "2017-11-24T13:46:16.000Z"
  },
  {
    "id": 4,
    "total": 12,
    "dat": "2018-04-02T09:15:35.000Z",
  }
]

我想用以下格式表示折线图：

var xAxis = {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
};
var series = [{
        name: '2017',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6
        ]
    },
    {
        name: '2018',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
            24.1, 20.1, 14.1, 8.6, 2.5
        ]
    }
];

基本上数据代表所有月份的总和。

【问题讨论】：

酷。但是你有问题吗？
您能描述一下这张图表的外观吗？据我了解，您有一个像这样的基本图表：jsfiddle.net/BlackLabel/L1rmbaw6，但我不明白这个总数应该是什么样子。它应该是同一张图表上的另一个系列？图片可能真的很有用......

标签： node.js typescript highcharts

【解决方案1】：

首先，编写一个从日期开始挖掘月份的函数，例如：

var dateToMonth = (date) => {
    var matched = /[\d]{4}-([\d]{2})-[.]*/g.exec(date)[1];
    return matched;
};

也写别人的采矿年。甚至还有一个 in_array 函数：

function inArray(needle, haystack) {
    var length = haystack.length;
    for(var i = 0; i < length; i++) {
        if(haystack[i] == needle) return true;
    }
    return false;
}

然后你必须编写一个函数来迭代你的数据并总结相同月份的数据：

var format = (data) => {
    var month_format = [0,0,0,0,0,0,0,0,0,0,0,0];
    var last_format = [];
    data.map(e => {
        var year = dateToYear(e.date);
        var years = last_format.map(data_e => data_e.name);
        if (!inArray(year, years)) last_format.add({name: year, data: month_format});
        var month = dateToMonth(e.date);
        last_format.forEach(i => {
           if (i.name === year) i[month - a] += e.data;
        });
    });
    return last_format;
};

【讨论】：