Question

当容器在小型设备中显示属性为none时，饼图有问题，我有以下错误：

未捕获的IndexSizeError：无法在'CanvasRenderingContext2D'上执行'arc'：提供的半径（-0.5）为负。

我的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饼图问题，显示：无

1 个答案: