Chart.js大小不适应div

时间:2017-06-08 21:07:50

标签: javascript html css twitter-bootstrap

我已经尝试了很多东西(修改css,将内联css添加到画布,将内联css添加到画布的包装div)但我仍然无法使图表正确地适合面板。

enter image description here

这是HTML

        <section class="panel">
            <header class="panel-heading">
                Temp
            </header>
                <canvas id="tempChart"></canvas>
        </section>

这是js代码

<script>

var data = {
    labels: ["January", "Aary", "March", "April", "May", "June"],
    datasets: [{
        label: "My First dataset",
        fillColor: 'rgba(220,220,220,0)',
        strokeColor: "rgba(220,220,220,1)",
        pointColor: 'red',
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    } ]
};

var option = {
    responsive: true,

};

var ctx = $("#tempChart").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, option);

CSS中的类面板仅包含图形内容,例如边框背景颜色等。 顺便说一下,我正在使用Bootstrap网格。 谢谢你的帮助。

2 个答案:

答案 0 :(得分:0)

您是否尝试使用默认值设置所有图表:Chart.defaults.global.responsive = true;

你设置的全局synthax似乎是正确的

var options = { responsive:true }

然而;这是一个很小的细节,但你真的加了一个昏迷。 我建议删除它。

正如@brian建议的那样;请;告诉我们lib的版本。 添加jsfindle甚至更好

答案 1 :(得分:0)

感谢所有回复。问题是我正在使用的lib版本。更新解决了问题。