Блог

Мне нужна помощь в рисовании круговой диаграммы, которую нужно воспроизвести следующим образом

пробовал в javascript

 <script type="text/javascript">

    var ctx = document.getElementById('FailingChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        segmentShowStroke: true,

        data: {
            labels: ["PASS","FAIL"],
            datasets: [{
                backgroundColor: [


                 "Red", "#2ecc71",
                ],
                data:[[5,8,6,5],76]
            }]
        },

        animation: {
            animateScale: true,
        }
    });

    var legend = myChart.generateLegend();
    $("#legend").html(legend);
</script>
 

но не сработало

две метки 76% и 24% 24% должны быть разделены на различные 5,8,6,5

 Solved this scenario by adding multiple dataset for pie chart 
Code:
 var chartData = {
            labels: [],
            datasets: [{
                label: ["Fail", "Pass"],

                data: [24, 76],
                backgroundColor: [
                  "#FF0000",
                 "#90EE90"
                ],

            }, {
                label: ["C1", "C2", "C3", "C4", "C5", "C6", "C7", "Total"],

                data: [0.5, 0.12, 0.25, 0.40, 0.22, 0.36,5.6],
                backgroundColor: [
                  "#766757",
                  "#FCB441",
                  "#E0400A",
                  "#056492",
                  "#BFBFBF",
                  "#1A3B69",
                  "#90EE90"
                ],

            }]
        };
        var options = {

            legend: false,


        }
        var pieChart = new Chart(ctx, {
            type: 'pie',
            data: chartData,
            options: options



        });