Сгруппируйте, добавьте или объедините два значения в круговой диаграмме Google - PullRequest
Новая
       21

Сгруппируйте, добавьте или объедините два значения в круговой диаграмме Google

0 голосов
/ 11 июня 2018

Это мой первый вопрос здесь, извините, если он не очень прост.

Пожалуйста, посмотрите этот пример изображения

Короче говоря, я хочу увидетьобщее количество углеводов, но также имейте в виду, сколько из него сахара.

Идеальный результат показал бы в легенде:

108 чистых углеводов

из которых43 г сахара

и на графике суммируйте светло-красный и темно-красный вместе (20,7% вместо 12,4% и 8,3%).

Любая помощь приветствуется!

Это код: 

function drawChart() {

    var dataArray = [
                    //['Macronutrient', 'Calories from macronutrient'],
                    ['Protein',      530],
                    ['Fat',     1127.7],
                    ['Net Carbs',  260.1],
                    ['Sugars',  173.1]
    ];

    var total = getTotal(dataArray);

    // Adding tooltip column
    for (var i = 0; i < dataArray.length; i++) {
        dataArray[i].push(customTooltip(dataArray[i][0], dataArray[i][1], total));
    }

    // Changing legend
    for (var j = 0; j < dataArray.length; j++) {
        if (dataArray[j][0]=="Fat") var nrkcal = 9;
        else nrkcal = 4;
        dataArray[j][0] = Math.round(dataArray[j][1]/nrkcal) + "g " +
            dataArray[j][0];         }

    // Column names
    dataArray.unshift(['Macronutrient', 'Calories', 'Tooltip']);

    var data = google.visualization.arrayToDataTable(dataArray);

    var options = {
        title: 'Calories breakdown',
        width: 640,
        height: 345,
        colors: ['#a9bef1', '#b7faa0', '#fb8679', '#be6c62'],
        pieSliceTextStyle: {
            color: 'black'
        }
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
}

function customTooltip(name, value, total) {
    return name + '<br/><b>' + value + ' (' + ((value/total) * 100).toFixed(1) + '%)</b>';
}

function getTotal(dataArray) {
    var total = 0;
    for (var i = 0; i < dataArray.length; i++) {
        total += dataArray[i][1];
    }
    return total;
}

Редактировать:

Я сделал первую часть, что показать в легенде.Единственная оставшаяся задача на круговой диаграмме - сложить вместе красные ломтики - вместо 12,4 и 8,3 будет отображаться 20,7%.Возможно ли это?

См. Прикрепленное изображение

А вот обновленный код: 

    // Adding tooltip column
    var tc_prc = 0; //Total carbs procent
    for (var i = 0; i < dataArray.length; i++) {
        if (dataArray[i][0]=="Net Carbs") tc_prc += (dataArray[i][1]/total) * 100;
        if (dataArray[i][0]=="Sugars") tc_prc += (dataArray[i][1]/total) * 100;
        dataArray[i].push(customTooltip(dataArray[i][0], dataArray[i][1], total));
    }
    tc_prc = tc_prc.toFixed(1);

    // Changing legend
    var totalc = 0;
    for (var j = 0; j < dataArray.length; j++) {

        if (dataArray[j][0]=="Fat") var nrkcal = 9;
        else nrkcal = 4;

        if (dataArray[j][0]=="Net Carbs") totalc += Math.round(dataArray[j][1]/nrkcal);
        if (dataArray[j][0]=="Sugars") totalc += Math.round(dataArray[j][1]/nrkcal);

        dataArray[j][0] = Math.round(dataArray[j][1]/nrkcal) + "g " + dataArray[j][0]; 
    }

    //Total number of net carbs and sugar
    dataArray[2][0] = totalc + 'g Net Carbs';
    dataArray[3][0] = 'of which ' + dataArray[3][0];
...