Javascript 为每个Json对象创建饼图

Javascript 为每个Json对象创建饼图,javascript,highcharts,Javascript,Highcharts,我有一个带有多个数组的Json和foreach数组,我想创建饼图,但我不知道怎么做 这是我的最爱。这就是我所尝试的: function Pie() { $.getJSON("/Admin/Attivita/OreOggi", function (data) { console.log(data); var oreTecico = []; var oreTecico = []; var oreMala

我有一个带有多个数组的Json和foreach数组,我想创建饼图,但我不知道怎么做

这是我的最爱。这就是我所尝试的:

function Pie() {

    $.getJSON("/Admin/Attivita/OreOggi", function (data) {

        console.log(data);

        var oreTecico = [];
        var oreTecico = [];
        var oreMalatia = [];
        var oreStraordinario = [];
        var oreInfortunio = [];
        var oreFerie = [];

        for (var i = 0; i < data.length; i++) {
            nomeTecnico.push(data[i].nome);
            oreTecico.push(data[i].odinario);
            oreMalatia.push(data[i].malatia);
            oreStraordinario.push(data[i].straordinario);
            oreInfortunio.push(data[i].infortunio);
            oreFerie.push(data[i].ferie);
        };
        // Build the chart
        Highcharts.chart('zdravko', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Ore segnate oggi'
            },
            tooltip: {
                pointFormat: '<b>{point.name}</b>: {point.y:.1f} h.'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: nomeTecnico[0],
                colorByPoint: true,
                data: [{
                    name: '',
                    y:0,
                    sliced: true,
                    selected: true
                }, {
                        name: 'Odinario',
                        y: oreTecico[0]
                }, {
                        name: 'Malatia',
                        y: oreMalatia[0]
                }, {
                        name: 'Straordinario',
                        y: oreStraordinario[0]
                }, {
                        name: 'Infortunio',
                        y: oreInfortunio[0]
                }, {
                        name: 'Ferie',
                        y: oreFerie[0]
                }]
            }]
        });
    });
}
chartData
包含未定义的对象


是否可以在Highcharts中为或foreach设置

您需要在循环中使用
Highcharts.chart
方法,例如:

    var data = [{
        data1: 12,
        data2: 25
    }, {
        data1: 67,
        data2: 11
    }];

    data.forEach(function(el) {
        var chartData = [el.data1, el.data2];
        var chartContainer = document.createElement('div');
        document.getElementById('container').append(chartContainer);

        Highcharts.chart(chartContainer, {
            series: [{
                type: 'pie',
                data: chartData
            }]
        });
    });

现场演示:


API参考:

chartData
未定义。它创造了馅饼,但是是空的嗨,米切夫,你到底是什么意思?上面的例子工作正常。在您的情况下,是的,它工作,传递静态数据。我有一个dinamic数组,我从DB得到它,里面可以有100个对象。我只提供了一个例子,说明如何在一个循环中创建多个图表。对于您的数据,它应该类似于以下示例:如何将其放在一行中?
    var data = [{
        data1: 12,
        data2: 25
    }, {
        data1: 67,
        data2: 11
    }];

    data.forEach(function(el) {
        var chartData = [el.data1, el.data2];
        var chartContainer = document.createElement('div');
        document.getElementById('container').append(chartContainer);

        Highcharts.chart(chartContainer, {
            series: [{
                type: 'pie',
                data: chartData
            }]
        });
    });