добавить строку строки в ассоциативный массив Bar - PullRequest
0 голосов
/ 12 марта 2020

Вот мои ассоциативные данные массива для диаграммы. js enter image description here Я пытаюсь добавить линейный график внутри гистограммы. но я не совсем понимаю, как добавить в нее новую диаграмму.

, поскольку мои наборы данных - это массив

const tmp_orders = [
        {
            "type": "import",
            "year": 2020,
            "total": 1
        },
        {
            "type": "import",
            "year": 2019,
            "total": 0
        },
        {
            "type": "import",
            "year": 2018,
            "total": 0
        },
        {
            "type": "export",
            "year": 2020,
            "total": 0
        },
        {
            "type": "export",
            "year": 2019,
            "total": 0
        },
        {
            "type": "export",
            "year": 2018,
            "total": 0
        }
    ],
        const res = [];
        const result = tmp_orders[0].map(function(obj) {
            var tmp = []
            Object.entries(obj).map(function([key, value]) {
                tmp[key] = value
            })
            res.push(tmp)
        });

        console.log(res)
        // get order type and sort
        const types =[...new Set(res.map(v => v['type']))].sort();

        // get order year and sort
        const years =[...new Set(res.map(v =>v['year']))].sort();

        // set order color and sort
        const colors = ['#ff0000', '#6383ff'];

        // data for target order chart
        const target_data = types.map(type => ({
            label: type,
            data: years.map(year => {
                const value = res.find(v => v['type'] == type && v['year'] == year );
                return value['total'];
            }),
            backgroundColor: function(){
                if(type === 'import'){
                    return '#ff0000'
                }else if(type === 'export'){
                    return '#6383ff'
                }
            }
        }))

        const targetOrderCtx = $('#chart_target_order'),
              optionOrder    = {
                    maintainAspectRatio: false,
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Target Order',
                        fontSize: 18,
                        fontColor: '#6383ff'
                    },
                    legend: {
                        display: true,
                        position: 'bottom'
                    },
                    animation: {
                        animateScale: true,
                        animateRotate: true
                    }
            }

        // create Target Order Chart
        var chart_target_order = new Chart(targetOrderCtx, {
            type: 'bar',
            data: {
                    labels: years,
                    datasets: target_data
            },
            options: optionOrder
        });

, если вы загляните внутрь моих наборов данных, вы обнаружите, что это массив. В основном я нахожу какое-то решение, например, добавление линейных диаграмм в ie наборов данных, но для меня это кажется невозможным.

EDIT 1

вот результат, который я хочу.

enter image description here

...