响应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只是略微小到响应图表，以达到该宽度的适当大小我认为？

我最终做的是将图表（响应模式打开）放在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");