chart.js 饼图显示问题：none

Question

当容器在小型设备中显示属性 none 时，饼图出现问题，并且出现以下错误：

Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.5) is negative.

我的HTML代码是

<div class="container-fluid charts hidden-xs">
    <div class="row">
        <div class="col-md-6 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">Annual sales</div>
                <div class="panel-body">
                    <canvas class="annualChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">Visitors per shop</div>
                <div class="panel-body">
                    <canvas class="visitorsChart" width="400" height="400"></canvas>
                    <div id="legend"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">Fans</div>
                <div class="panel-body">
                    <canvas class="annualfanschart" width="400" height="400" ></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">General sales</div>
                <div class="panel-body">
                    <canvas class="generalSalesChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

而我的饼图 div 的 JS 代码是（其他的是折线图和条形图）

var data = [
{
    value: 300,
    color:"#F7464A",
    highlight: "#FF5A5E",
    label: "Men"
},
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Women"
},
    {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Children",
    }
];
var options = {

animationSteps : 100,

animationEasing : "easeOutBounce",

animateRotate : true,

animateScale : true

}
var ctx = $(".visitorsChart").get(0).getContext("2d");
var myPieChart = new Chart(ctx).Pie(data,{
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for     (var i=0; i<segments.length; i++){%><li><span style=\"background-color:    <%=segments[i].fillColor%>\"></span><%if(segments[i].label){%>    <%=segments[i].label%><%}%></li><%}%></ul>"
});

var legend = myPieChart.generateLegend();
$("#legend").html(legend);

我只有饼型遇到这个问题，其他类型没有显示错误

Answer 1

目前 chart.js 中存在错误：https://github.com/nnnick/Chart.js/issues/592

如果元素不可见，尝试跳过图表呈现

if ($(".visitorsChart").is(":visible")) {
  var ctx = $(".visitorsChart").get(0).getContext("2d");
  var myPieChart = new Chart(ctx).Pie(data,{});
}

chart.js 饼图显示问题：none

chart.js pie chart issue with display: none

javascript

chart.js