javascript - 具有最小高度的响应式 Chart.js 圆环图

Question

我一直在努力寻找一个漂亮的圆环图，它是响应式的，我遇到了 chart.js

但是，我很难让圆环图达到我想要的大小。

有谁知道我怎样才能让它有最小高度？我很想听听您的建议。

我的目标是让它在高度和宽度方面都填满红色 div。目前，这就是我所拥有的:

我正在使用引导网格

<div class="col-sm-4" style="border:1px solid red;height:350px">
      <canvas id="weekly_doughnut_data"></canvas>
 </div>
 <div class="col-sm-8">
      <canvas id="weekly_line_data"></canvas>
 </div>

Javascript

var weekly_doughnut_data = [
{
    value: 1,
    color:"#53A3EB",
    highlight: "#53A3EB",
    label: "Simple"
},
{
     value: 3,
     color: "#34495e",
     highlight: "#34495e",
     label: "Advanced"
}];
var weekly_doughnut_ctx = document.getElementById("weekly_doughnut_data").getContext("2d");
var weekly_doughnut_chart = new Chart(weekly_doughnut_ctx).Doughnut(weekly_doughnut_data,{percentageInnerCutout : 90, responsive: true});

我尝试了一个调整大小的功能，我自己设置了高度，但它变得非常小故障(在鼠标悬停时)并且很慢。

$(window).resize(function()
{
    weekly_doughnut_ctx.canvas.height = $(".canvas_holder").height();
    weekly_doughnut_chart = new Chart(weekly_doughnut_ctx).Doughnut(weekly_doughnut_data,{percentageInnerCutout : 90, responsive: true});
     //weekly_doughnut_chart.resize();
     //weekly_doughnut_chart.redraw();

});

Answer 1

我并不能真正“解决”这个问题。但似乎正在发生的事情是，红色边框的 div 只是稍微变小，以便响应式图表达到我认为适合该 div 宽度的适当大小？

我最终做的是将图表(响应模式打开)放在 2 个引导列中，最终看起来非常漂亮。

<div id="circle_chart" class="col-md-5"><canvas></canvas></div>
<div id="chart_container" class="col-md-7"><canvas></canvas></div>

在窗口调整大小时，我最终计算了 circle_chart 的高度，然后添加了 50% 高度的边距，并从 chart_container 的高度中减去它，所以它以另一个图形为中心。

$("#circle_chart").css("margin-top", (($("#chart_container").height()-$("#circle_chart").height())/2)+"px");