javascript - 如何为 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/

标签： javascriptjsonhighcharts

Answer 1

这是我的想法，无论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
})