Question

试图在同一页面上显示两个饼图，但是不起作用。这是代码：

<html>
    <head>
    </head>
    <body>
        <canvas id="tests-summary" height="50px"></canvas>
        <canvas id="exceptions-summary" height="50px"></canvas>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
        <script>
            // Tests pie chart
            var testSummaryData = {
                datasets: [{
                    data: [
                        55,
                        114,
                        152
                    ],
                    backgroundColor: [
                        "#82bc41",
                        "#bbbbbb",
                        "#c8102e"
                    ],
                    label: 'My dataset' // for legend
                }],
                labels: [
                    "Passed",
                    "Skipped",
                    "Failed"
                ]
            };

            var testSummaryOptions = {
              events: false,
              animation: {
                duration: 500,
                easing: "easeOutQuart",
                onComplete: function () {
                  var ctx = this.chart.ctx;
                  ctx.font = "bold 16px Arial";
                  ctx.textAlign = 'center';
                  ctx.textBaseline = 'bottom';

                  this.data.datasets.forEach(function (dataset) {

                    for (var i = 0; i < dataset.data.length; i++) {
                      var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                          total = dataset._meta[Object.keys(dataset._meta)[0]].total,
                          mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
                          start_angle = model.startAngle,
                          end_angle = model.endAngle,
                          mid_angle = start_angle + (end_angle - start_angle)/2;

                      var x = mid_radius * Math.cos(mid_angle);
                      var y = mid_radius * Math.sin(mid_angle);

                      ctx.fillStyle = '#fff';
                      if (i == 1){ // Darker text color for lighter background
                        ctx.fillStyle = '#444';
                      }
                      var percent = String(Math.round(dataset.data[i]/total*100)) + "%";      
                      //Don't Display If Legend is hide or value is 0
                      if(dataset.data[i] != 0 && dataset._meta[0].data[i].hidden != true) {
                        ctx.fillText(dataset.data[i], model.x + x, model.y + y);
                        // Display percent in another line, line break doesn't work for fillText
                        ctx.fillText(percent, model.x + x, model.y + y + 15);
                      }
                    }
                  });               
                }
              }
            };

            var testSummaryCanvas = $("#tests-summary");
            var testSummaryPieChart = new Chart(testSummaryCanvas, {
              type: 'pie',
              data: testSummaryData,
              options: testSummaryOptions
            });

            var exceptionsSummaryData = {
                datasets: [{
                    data: [
                        55,
                        114
                    ],
                    backgroundColor: [
                        "#82bc41",
                        "#bbbbbb"
                    ],
                    label: 'My dataset' // for legend
                }],
                labels: [
                    "Passed",
                    "Skipped"
                ]
            };

            var exceptionsSummaryOptions = {
              events: false,
              animation: {
                duration: 500,
                easing: "easeOutQuart",
                onComplete: function () {
                  var ctx = this.chart.ctx;
                  ctx.font = "bold 16px Arial";
                  ctx.textAlign = 'center';
                  ctx.textBaseline = 'bottom';

                  this.data.datasets.forEach(function (dataset) {

                    for (var i = 0; i < dataset.data.length; i++) {
                      var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                          total = dataset._meta[Object.keys(dataset._meta)[0]].total,
                          mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
                          start_angle = model.startAngle,
                          end_angle = model.endAngle,
                          mid_angle = start_angle + (end_angle - start_angle)/2;

                      var x = mid_radius * Math.cos(mid_angle);
                      var y = mid_radius * Math.sin(mid_angle);

                      ctx.fillStyle = '#fff';
                      if (i == 1){ // Darker text color for lighter background
                        ctx.fillStyle = '#444';
                      }
                      var percent = String(Math.round(dataset.data[i]/total*100)) + "%";      
                      //Don't Display If Legend is hide or value is 0
                      if(dataset.data[i] != 0 && dataset._meta[0].data[i].hidden != true) {
                        ctx.fillText(dataset.data[i], model.x + x, model.y + y);
                        // Display percent in another line, line break doesn't work for fillText
                        ctx.fillText(percent, model.x + x, model.y + y + 15);
                      }
                    }
                  });               
                }
              }
            };

            var exceptionsCanvas = $("#exceptions-summary");
            var exceptionsPieChart = new Chart(exceptionsCanvas, {
              type: 'pie',
              data: exceptionsSummaryData,
              options: exceptionsSummaryOptions
            });
        </script>
    </body>
</html>

带有Chart.js的多个饼图

0 个答案: