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

Question

我在我的项目中使用 angular-highcharts。我使用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/

Answer 1

您正在尝试将数据转换为这种格式

[ 
    {
       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);

这是一个更新的小提琴，用于显示 highcharts/您的数据：https://jsfiddle.net/u7opL2dw/2/

Answer 2

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

演示：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
})