Question

我无法获得Chart.js（v2.6）饼图以适应引导div。宽度响应，但高度溢出。正如您在小提琴中所看到的那样，我将%{ "id" => "default_agenda", "name" => "Default Agenda", "pages" => [ %{ "content" => "<p>foo</p>", "duration" => 10, "id" => "0849862a-0794-4466-88a3-6052da360ca0" }, %{ "content" => "<p>bar</p>", "duration" => 15, "id" => "93387d2d-a6ed-4902-911f-4dc1525aca2b" } ] }的高度设置为210px。该框保持高度，但图表没有。

HTML：

statcard-fixed-height

JS：

  <div class="row">
    <div class="col-lg-1 m-b">
        <div id="new-old" class="statcard statcard-primary statcard-bg statcard-fixed-height-lg">
            <div class="p-a">
                <span class="statcard-desc">New vs. Returning Users</span>
                <canvas id="myPieChart"></canvas>
            </div>
        </div>
    </div>
  </div>

小提琴：https://jsfiddle.net/3d6hqhc1/1/

更新

更简单的小提琴：https://jsfiddle.net/m80xxxv8/1/

Answer 1

https://github.com/chartjs/Chart.js/issues/2422

包括一个holder div，并将maintainAspectRatio设置为flase

<div id="canvas-holder" > <canvas id="chart-canvase" /> </div>

var options = { responsive: true, maintainAspectRatio : false };

Answer 2

您需要将图表包装成div

#responsive-chart{
   height: 100%;
   width: 100%;
}

<div class="row">
    <div class="col-lg-1 m-b">
        <div id="new-old" class="statcard statcard-primary statcard-bg statcard-fixed-height-lg">
           <div class="p-a">
               <span class="statcard-desc">New vs. Returning Users</span>
                <div id="responsive-chart">
                    <canvas id="myPieChart"></canvas>
                </div>
           </div>
       </div>
    </div>
</div>

Chart.js饼图溢出div

2 个答案: