Chartjs内部分离

时间:2016-10-14 17:00:29

标签: jquery charts chart.js

我需要帮助绘制饼图必须像这样复制

enter image description here

在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

1 个答案:

答案 0 :(得分:0)

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



        });