如何使图表小于其容器

Question

我正在执行asp.net核心项目。我有一个饼图。我使用outlabel插件来显示每个饼图的标签。现在的问题是，如何使图表小于其容器，以完整显示所有标签。现在，在运行项目后，控制台将显示少数几个标签的一半。我的代码如下：

    <div class="container">
        <div class="row box2">
            <div class="col-xl-9 pie" width="510" height="410" style="position:relative; border:1px solid orange;"> @*padding:20px;*@ @*width="650" height="450"*@
                <canvas class="canvaspie" id="piechart" width="510" height="410" style=" border:1px solid black;"></canvas>  @*width="710" height="520"*@
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
            @*outlabel plugin*@
            <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
    $(function () {
                        var bgcolor= [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(255, 0, 0)',
                                'rgba(0, 255, 0)',
                                'rgba(0, 0, 255)',
                                'rgba(192, 192, 192)',
                                'rgba(255, 255, 0)',
                                'rgba(255, 0, 255)'
                            ];
                         var commonbordercolor = [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)',
                                'rgba(255, 0, 0)',
                                'rgba(0, 255, 0)',
                                'rgba(0, 0, 255)',
                                'rgba(192, 192, 192)',
                                'rgba(255, 255, 0)',
                                'rgba(255, 0, 255)'
                            ];


                        var ctx = document.getElementById("piechart").getContext('2d');
                        var data = {
                                labels: @Html.Raw(XLabels),
                                datasets: [{
                                    label: "pie chart",
                                    backgroundColor: bgcolor,
                                    borderColor: commonbordercolor,
                                    borderWidth: 1,
                                    data: @Html.Raw(YValues)
                          }]
                            };

                            var options = {
                                responsive: false,
                                maintainAspectRatio: false,
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            min: 0,
                                            beginAtZero: true
                                        },
                                        gridLines: {
                                            display: true,
                                            color: "rgba(255,99,164,0.2)"
                                        }
                }],
                                    xAxes: [{
                                        ticks: {
                                            min: 0,
                                            beginAtZero: true
                                        },
                                        gridLines: {
                                            display: false
                                        }
                                    }]
                    },
                                //===================================new outlabel implementation
                                //outlabel implementation
                                zoomOutPercentage: 55, // makes chart 55% smaller (50% by default, if the preoprty is undefined)
                            plugins: {
                            outlabels: {
                                text: '%l %p',
                                color: 'black',
                                stretch: 45,
                                font: {
                                    resizable: true,
                                    minSize: 12,
                                    maxSize: 18
                                }
                            }
                        }
                                //===================================

        };

                       var myChart = new  Chart(ctx, {
                           options: options,
                                data: data,
                                type:'pie'

                       });
 </script>
        <style>
            .container, .box1,box2,box3 {
                /*display: block;*/
                /*padding: 10px;*/
                margin-bottom: 50px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1*/
                text-align: justify;

            }
            .container{
                border:1px solid red;
                display: block;
                }

            .box2{
                border:1px solid purple;
                padding-top: 60px;
                background-color: yellowgreen;
                padding-bottom: 60px;
                /*padding-right:40px;
                padding-right:40px;
                padding-left:40px;*/
                margin-top:40px;
                margin-right:40px;
                display: inline-block;
                /*float:left;*/
            }

        </style>

Answer 1

There was similar issue on github

一种解决方法是使用layout option

new Chart(ctx, {
  ...,
  layout: {
    padding: 100
  }
}

示例

$(function() {
  var bgcolor = [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)',
    'rgba(255, 0, 0)',
    'rgba(0, 255, 0)',
    'rgba(0, 0, 255)',
    'rgba(192, 192, 192)',
    'rgba(255, 255, 0)',
    'rgba(255, 0, 255)'
  ];
  var commonbordercolor = [
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)',
    'rgba(255, 0, 0)',
    'rgba(0, 255, 0)',
    'rgba(0, 0, 255)',
    'rgba(192, 192, 192)',
    'rgba(255, 255, 0)',
    'rgba(255, 0, 255)'
  ];


  var ctx = document.getElementById("piechart").getContext('2d');
  var data = {
    width: 100,
    height: 100,
    labels: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
    datasets: [{
      label: "pie chart",
      backgroundColor: bgcolor,
      borderColor: commonbordercolor,
      borderWidth: 1,
      data: [20, 40, 30, 10, 50, 15, 10]
    }]
  };

  var options = {
    responsive: false,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          beginAtZero: true
        },
        gridLines: {
          display: true,
          color: "rgba(255,99,164,0.2)"
        }
      }],
      xAxes: [{
        ticks: {
          min: 0,
          beginAtZero: true
        },
        gridLines: {
          display: false
        }
      }]
    },
    legend: {
        display: false
    },
    layout: {
      padding: 100
    },
    zoomOutPercentage: 55,
    plugins: {
      outlabels: {
        text: '%l %p',
        color: 'black',
        stretch: 45,
        font: {
          resizable: true,
          minSize: 12,
          maxSize: 18
        }
      }
    }
  };

  var myChart = new Chart(ctx, {
    options: options,
    data: data,
    type: 'pie'

  });
})

.container,
.box1,
box2,
box3 {
  margin-bottom: 50px;
  text-align: justify;
}

.container {
  display: block;
}

.box2 {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
<div class="container">
  <div class="row box2">
    <div class="col-xl-9 pie" width="510" height="410" style="position:relative;">
      <canvas class="canvaspie" id="piechart" width="410" height="410"></canvas>
    </div>
  </div>
</div>