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

【问题标题】：Responsive Chart.js Doughnut Chart with minimum height具有最小高度的响应式 Chart.js 圆环图
【发布时间】：2014-08-19 01:45:13
【问题描述】：

我一直在努力寻找一个漂亮的响应式甜甜圈图，结果发现了 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();

});

【问题讨论】：

我认为这不足以成为一个答案，但是您可以通过在重新创建图表之前调用 destroy() 来停止出现故障的 onMouseOver 行为：weekly_doughnut_chart.destroy() before week_doughnut_chart = new图表（...）。

标签： javascript jquery css chart.js

【解决方案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");

【讨论】：