बूटस्ट्रैप 3 टैब और चार्ट.जेएस - चार्ट

Question

पर चार्ट लोड नहीं हो रहे हैं, मैं एक पृष्ठ लेआउट के लिए Bootstrap 3 tabs और Chart.js का उपयोग किसी प्रोजेक्ट के लिए डोनट ग्राफ़ बनाने के लिए कर रहा हूं।

हालांकि चार्ट पर एक चार्ट के साथ बदलते समय चार्ट लोड नहीं होते हैं। कभी-कभी जब आप Google क्रोम में तत्वों का निरीक्षण शुरू करते हैं तो वे लोड होते हैं। वे केवल प्रस्तुत करने लगते हैं अगर वे पहले दिखाई देने वाले टैब पर लोड होते हैं।

क्रोम कंसोल में chart.js जावास्क्रिप्ट के साथ एक नाम से जाना जाता त्रुटि है:

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

और मुझे लगता है इस वजह से बूटस्ट्रैप टैब दृश्यता कोई नहीं पर सेट है और इसलिए चार्ट ठीक से प्रस्तुत नहीं करता है इस

किसी और हुआ है: या कुछ और ...

यह इस तरह की तलाश में किया जाना चाहिए समस्या & यदि हां; क्या आसपास कोई काम है?

... या मुझे एक और चार्टिंग स्क्रिप्ट की तलाश करनी चाहिए जो बूटस्ट्रैप टैब के साथ अच्छी तरह से खेलेंगे।

अग्रिम :)

Answer 1

मैं इस समस्या को पड़ा है में धन्यवाद। अगर मैं सही ढंग से याद है मैं इसे बुला जब सक्रिय टैब shown.bs.tab (http://getbootstrap.com/javascript/#tabs) अर्थात

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

आशा है कि मदद करता है का उपयोग करते हुए दिखाया गया है चार्ट js प्रस्तुत करना द्वारा हल किया।

Answer 2

Google खोज पर यह बेवकूफ हो गया। इससे मदद मिल सकती है। http://jsfiddle.net/woqsazau/2/

HTML:

<div class="container"> 
    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist" id="bs-tabs"> 
     <li><a href="#length" role="tab" data-toggle="tab">Length</a> 

     </li> 
     <li class="active"><a href="#height" role="tab" data-toggle="tab">Height</a> 

     </li> 
    </ul> 
    <!-- Tab panes --> 
    <div class="tab-content"> 
     <div class="tab-pane" id="length"> 
      <div class="canvas-holder"> 
       <canvas id="lengthChart" class="chart"></canvas> 
      </div> 
     </div> 
     <div class="tab-pane active" id="height"> 
      <div class="canvas-holder"> 
       <canvas id="heightChart" class="chart"></canvas> 
      </div> 
     </div> 
    </div> 
</div> 

जे एस:

function getJSON() { 

    var data = { 
     "Series": { 
      "height": [{ 
       "Date": "2014-09-19", 
        "Value": 85 
      }, { 
       "Date": "2014-09-23", 
        "Value": 74 
      }] 
     } 
    }; 


    console.log(data); 
    var series = {}; 

    // This loop is looping across all the series. 
    // x will have all the series names (heights, lengths, etc.). 
    for (var x in data.Series) { 
     var dates = []; 
     var values = []; 
     // Loop across all the measurements for every serie. 
     for (var i = 0; i < data.Series[x].length; i++) { 
      var obj = data.Series[x][i]; 
      // Assuming that all the different series (heights, lengths, etc.) have the same two Date, Value attributes. 
      dates.push(moment(obj.Date).format("MMMM Mo")); 
      values.push(obj.Value); 
     } 
     // Keep the list of dates and values by serie name. 
     series[x] = { 
      dates: dates, 
      values: values 
     }; 
    } 

    console.log(series.height.dates); 
    console.log(series.height.values); 
    //--------- 
    //valueArray.push(Value); 
    //dateArray.push(moment(date).format("MMMM Mo")); 

    var dataArray = { 
     labels: series.height.dates, 
     datasets: [{ 
      label: "Height", 

      strokeColor: "rgb(26, 188, 156)", 
      pointColor: "rgba(220,220,220,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data: series.height.values 
     }] 
    }; 

    function chartFunc(dataArray) { 

     var ctx = document.getElementById("heightChart").getContext("2d"); 
     var myLineChart = new Chart(ctx).Line(dataArray, { 
      scaleShowGridLines: true, 
      bezierCurve: true, 
      bezierCurveTension: 0.4, 
      datasetStroke: false, 
      fillColor: "rgba(0,0,0,0)", 
      datasetFill: false, 
      responsive: true, 
      showTooltips: true, 
      animation: false 
     }); 
    } //chartFunc 

    chartFunc(dataArray); 
} //getJSON 


$(document).ready(function() { 

    getJSON(); 

    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { 
     console.log("tab changed"); 
    }); 
}); 

Answer 3

मेरे लिए

समाधान मृत सरल है। इस प्रकार नवीनतम प्रतिबद्ध का उपयोग करना, Chart.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 4

चूंकि इस समस्या की उत्पत्ति बूटस्ट्रैप में कोई भी टैब-सामग्री प्रदर्शित नहीं होती है, मैंने इसे हल किया है सीएसएस हैक।

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

Answer 5

मैं एक नहीं बल्कि आसान और कुछ हद तक आलसी विकल्प मिल गया है।आप अपने सभी टैब "टैब फलक सक्रिय" करने के लिए इस तरह से अपने सभी चार्ट टैब शो पर तो

setTimeout(yourFunction, 250); 
function yourFunction() 
{ 
$('.nav-tabs a[href="#anytabExceptdefault"]').tab('show') 
$('.nav-tabs a[href="#backtoyourdefaultTab"]').tab('show')