chart.js饼图问题，显示：无

I have a problem with the pie chart when the container has a display property none in small devices and I have the following error :

当容器在小型设备中具有显示属性none时我的饼图有问题,并且我有以下错误:

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

未捕获的IndexSizeError:无法在'CanvasRenderingContext2D'上执行'arc':提供的半径(-0.5)为负数。

my HTML code is

我的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>

and my JS code for the pie chart div is (the others are line and bar charts)

我的饼图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);

I face this problem only with the pie type, the other types doesn't show errors

我只用饼图类型面对这个问题,其他类型不显示错误

1 个解决方案

#1

There's currently a bug in chart.js: https://github.com/nnnick/Chart.js/issues/592

chart.js目前有一个错误:https://github.com/nnnick/Chart.js/issues/592

Try to skip chart rendering if the element is not visible

如果元素不可见,请尝试跳过图表渲染

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

#1