如何为高图生成动态系列数据？

如何解决如何为高图生成动态系列数据？

我正在为项目使用角高图表。我已https://www.highcharts.com/demo/column-basic将此图表用于数据。我的数据格式如下。

[
    {
        "project": "train project1","hours": {
            "AD": 58265
        }
    },{
        "project": "butify","hours": {
            "AD": 3940
        }
    },{
        "project": "skler","hours": {
            "AD": 563250
        }
    },{
        "project": "Internal Application","hours": {
            "AD": 33325,"DAM": 328095
        }
    },{
        "project": "train2project","hours": {
            "AD": 137215
        }
    },{
        "project": "CELLProje1","hours": {
            "DAM": 488470
        }
    },{
        "project": "rangeselector","hours": {
            "AD": 3015,"DAM": 71175
        }
    },{
        "project": "Android dev","hours": {
            "AD": 99160
        }
    },{
        "project": "Web Application","hours": {
            "AD": 72720
        }
    }
];

“小时”内的值将是一个或多个。到目前为止，我已经添加了我的小提琴。我努力为系列数据形成json。此外，我需要为图表形成X轴应该在数组中。 例如：

categories: [
            'train project1','beautify','skler','Internal Application','train project2','rangeselector','Android','Web Application'

        ],

X轴方向正确吗？

http://jsfiddle.net/harifrais/uxpvs8fw/34/

解决方法

您正在尝试以这种格式获取数据

[ 
    {
       name:"series-name",data:[ ... ]
    }
]

但是要使用类别，每个系列中必须有与类别相同数量的元素。而且，由于输入数据中的每个hours元素都不包含全部内容，因此您需要做更多的工作。

1. 从hours
获取所有键的不同列表。
2. 遍历每个元素，并将project用作类别
3. 在hours中未出现任何元素的地方填充零

因此，您可以使用reduce和map通过一个相当简单的两步过程来做到这一点。

var data = [{"project":"train project1","hours":{"AD":58265}},{"project":"butify","hours":{"AD":3940}},{"project":"skler","hours":{"AD":563250}},{"project":"Internal Application","hours":{"AD":33325,"DAM":328095}},{"project":"train2project","hours":{"AD":137215}},{"project":"CELLProje1","hours":{"DAM":488470}},{"project":"rangeselector","hours":{"AD":3015,"DAM":71175}},{"project":"Android dev","hours":{"AD":99160}},{"project":"Web Application","hours":{"AD":72720}}];

// get a distinct list of hour keys
var seriesData =  data.reduce( (acc,{hours}) => {
     Object.keys(hours).forEach(key => {
        if(!acc[key]) acc[key] = [];
    })
    return acc;
},{});

// reduce the original data to get categories and series values
// filling in zeros where necessary
var result = data.reduce( (acc,{project,hours}) => {
   acc.categories.push(project);
   
   Object.keys(acc.seriesData).forEach(s => {
       acc.seriesData[s].push(hours[s] || 0);
   });
   
   return acc;
},{categories:[],seriesData:seriesData});

// shape the data to how highcharts wants it
var categories = result.categories;
var series = Object.entries(result.seriesData).map( e => ({
    name: e[0],data:e[1]
}));

console.log(categories);
console.log(series);

以下是更新的小提琴，用于显示高位图表/您的数据：https://jsfiddle.net/u7opL2dw/2/

,

这是我的想法，无论data.hours对象中有多少个属性，如何在Highcharts库中解析数据以供使用。

演示：http://jsfiddle.net/BlackLabel/31tp0mkw/

const categories = sampleJson.map(data => data.project);

const getSeriesNames = sampleJson.map(data => {
    for (let i in data.hours) {
        return i
    }
}).filter((item,i,ar) => ar.indexOf(item) === i);


const series = getSeriesNames.map(name => {
    let output = {
        name: name,data: []
    };

    sampleJson.forEach(data => {
        if (data.hours[name]) {
            output.data.push(data.hours[name])
        } else {
            output.data.push(null)
        }
    });
    
    return output
})