Блог

Главная - Вопросы по программированию - Создание круговой диаграммы для каждого объекта Json

Создание круговой диаграммы для каждого объекта Json

#javascript #highcharts

#javascript #диаграммы

Вопрос:

У меня есть один Json с несколькими массивами и для каждого массива Я хочу создать круговую диаграмму, но я не знаю, как это сделать.

Это тот массив, который у меня есть. И это то, что я пробовал :

 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]
                }]
            }]
        });
    });
}

Он показывает только последние «данные». Я хочу сделать для каждого массива один круг. Если у меня есть 100 массивов, я хочу 100 пирогов.

Обновить:

Я добавил это :

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

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

Это chartData массив неопределенных объектов.

Возможно ли создать for или foreach внутри Highcharts?

Ответ №1:

Вам нужно использовать 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
            }]
        });
    });

Живая демонстрация: http://jsfiddle.net/blackLabel/x95pbw7j/

Ссылка на API: https://api.highcharts.com/class-reference/Highcharts#.chart

Комментарии:

1. chartData не определено. Он создает круговую диаграмму, но она пуста i.stack.imgur.com/msl6p.png

2. Привет @micev, что именно ты имеешь в виду? Приведенный выше пример работает правильно.

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

4. Я привел вам только пример того, как вы можете создавать несколько диаграмм в цикле. С вашими данными это должно выглядеть примерно так, как в этом примере: jsfiddle.net/BlackLabel/sLch5vwp

5. Как я могу поместить это в одну строку / строку?