首页 文章

响应Chart.js甜甜圈图表与最小高度

提问于
浏览 次
2

我一直试图找到一个漂亮的甜甜圈图表响应，我遇到了chart.js

但是，我很难将甜甜圈图表变得像我想要的那样大 .

有谁知道我怎么能让它有一个最小高度？我很想听听你的建议 .

我的目标是让它明智地填充红色div的高度和宽度 . 目前，这就是我所拥有的：
enter image description here

我正在使用bootstrap网格

<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();

});
javascript jquery css chart.js

1 回答

  • 2

    我不是真的能够解决这个问题 . 但似乎正在发生的事情是红色边框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");
    回复于

相关问题