引导3标签

Question

我正在使用Bootstrap 3选项卡进行页面布局，并Chart.js为项目创建甜甜圈图。

但是，当更改为带有图表的选项卡时，图表不会加载。有时，当您开始在谷歌浏览器中检查元素时，它们会加载。它们似乎只有在第一个可见选项卡上加载时才会呈现。

chrome控制台中的chart.js javascript有一个已知错误:

未捕获的IndexSizeError:无法对“CanvasRenderingContext2D”执行“arc”:提供的半径(-0.5)为负。

我认为这是因为Bootstrap将选项卡的可见性设置为“无”，因此图表无法正确呈现或出现其他问题。。。

它应该是这样的：

其他人有过这个问题吗

...或者我应该寻找另一个图表脚本，它可以很好地与Bootstrap选项卡一起使用。

谢谢你提前：）

Answer 1

对我来说，解决办法非常简单。使用最新提交，更新图表。Arc功能如下:

Chart.Arc = Chart.Element.extend({
    inRange: function (chartX, chartY) {

    var pointRelativePosition = helpers.getAngleFromPoint(this, {
        x: chartX,
        y: chartY
    });

    //Check if within the range of the open/close angle
    var betweenAngles = (pointRelativePosition.angle >= this.startAngle && pointRelativePosition.angle <= this.endAngle),
        withinRadius = (pointRelativePosition.distance >= this.innerRadius && pointRelativePosition.distance <= this.outerRadius);

    return (betweenAngles && withinRadius);
    //Ensure within the outside of the arc centre, but inside arc outer
},
tooltipPosition: function () {
    var centreAngle = this.startAngle + ((this.endAngle - this.startAngle) / 2),
        rangeFromCentre = (this.outerRadius - this.innerRadius) / 2 + this.innerRadius;
    return {
        x: this.x + (Math.cos(centreAngle) * rangeFromCentre),
        y: this.y + (Math.sin(centreAngle) * rangeFromCentre)
    };
},
draw: function (animationPercent) {

    var easingDecimal = animationPercent || 1;

    var ctx = this.ctx;
    var innerRadius = (this.innerRadius < 0) ? this.innerRadius * -1 : this.innerRadius;
    var outerRadius = (this.outerRadius < 0) ? this.outerRadius * -1 : this.outerRadius;

    ctx.beginPath();

    ctx.arc(this.x, this.y, outerRadius, this.startAngle, this.endAngle);

    ctx.arc(this.x, this.y, innerRadius, this.endAngle, this.startAngle, true);

    ctx.closePath();
    ctx.strokeStyle = this.strokeColor;
    ctx.lineWidth = this.strokeWidth;

    ctx.fillStyle = this.fillColor;

    ctx.fill();
    ctx.lineJoin = 'bevel';

    if (this.showStroke) {
        ctx.stroke();
    }
}

});

需要注意的是内半径和外半径上的三元运算符，以防止负值。这就像我的项目上的魅力。图表继续具有响应性，并且通过将半径转换为自然数（即：正数）没有有害影响

Answer 2

我也遇到过这个问题。如果我没记错的话，我是通过在使用< code > showed . bs . tab (http://getbootstrap.com/javascript/#tabs)显示活动选项卡时调用图表js render来解决这个问题的

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  //call chart to render here
});

希望这有帮助。

Answer 3

由于这个问题的根源是在引导程序中不显示标签内容，我用一点css技巧解决了这个问题。

.tab-content>.tab-pane {
    display: block;
    height: 0;
    overflow: hidden;
}
.tab-content>.tab-pane.active {
    height: auto;
}