「與模式

一起使用時，」所提供的半徑（-0.5）爲負值「似乎我無法在模態窗口中放置由Chart.js製成的餅圖，因爲模態窗口最有可能在其屬性中具有display: none。「與模式

但我真的不知道如何解決這個問題。我生成一個模態窗口餅圖，當我嘗試打電話給我的JavaScript，使圖表，我得到的錯誤：

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

從我可以讀這是在CSS有display: none引起的。我確信莫代爾會這樣做。對此的解決方案可能是使用AngularJS $timeout函數。但是我不想僅僅利用整個AngularJS庫來實現這一功能。

那麼有可能以另一種方式做到這一點？在我想將其移至模態之前，我已在單獨的頁面上測試了我的代碼。它工作得很好：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>TODO supply a title</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="shortcut icon" href="favicon.ico"> 

     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/font-awesome.min.css"> 

     <script src="js/moment-2.10.6.min.js"></script> 
     <script src="js/jquery-2.1.4.min.js"></script> 
     <script src="js/Chart.min.js"></script> 
     <script src="js/test/chart-test.js"></script> 
    </head> 
    <body> 
     <div class="pie-chart-container"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <canvas id="pie-chart" width="250" height="250"></canvas> 
        </div> 
        <div class="col-sm-4"> 
         <table class="table" id="current-data-table"> 
          <thead style="background-color: #f0ad4e; color: #FFF;"> 
           <tr> 
            <th>Name</th> 
            <th>Value</th> 
            <th>%</th> 
           </tr> 
          </thead> 
          <tbody id="pie-chart-legend-tbody"></tbody> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

我生成圖表是這樣的：

$(document).ready(function() { 
    var options = { 
     //Boolean - Whether we should show a stroke on each segment 
     segmentShowStroke: false, 
     //String - The colour of each segment stroke 
     segmentStrokeColor: "#fff", 
     //Number - The width of each segment stroke 
     segmentStrokeWidth: 2, 
     //Number - Amount of animation steps 
     animationSteps: 100, 
     //String - Animation easing effect 
     animationEasing: "easeInOutExpo", 
     //Boolean - Whether we animate the rotation of the Doughnut 
     animateRotate: true, 
     //Boolean - Whether we animate scaling the Doughnut from the centre 
     animateScale: false, 
     //String - A legend template 
     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>" 
    }; 
    $.getJSON("http://localhost:52535/PUendeligService.svc/GetStatusOverview", function (data) { 
     var object = $.parseJSON(data); 
     var parsedData = []; 
     $.each(object, function (index, element) { 
      var value = element["Value"]; 
      var color = element["Color"]; 
      var highLight = element["HighlightColor"]; 
      var label = element["Label"]; 
      parsedData.push(
        { 
         value: value, 
         color: color, 
         highlight: highLight, 
         label: label 
        } 
      ); 
     }); 
     var ctx = $('#pie-chart').get(0).getContext('2d'); 
     var myPieChart = new Chart(ctx).Pie(parsedData, options); 
     var myPieChartLegend = $('#pie-chart-legend-tbody'); 
     var tBodyContent = ''; 
     var valueTotal = 0; 
     $.each(parsedData, function (index) { 
      var value = parsedData[index]["value"]; 
      valueTotal += value; 
     }); 
     $.each(parsedData, function (index) { 
      var value = parsedData[index]["value"]; 
      var color = parsedData[index]["color"]; 
      var label = parsedData[index]["label"]; 
      var element = 
        '<tr>' + 
        '<td>' + 
        '<span class="fa fa-square" style="color:' + color + '"></span>\t' + label + 
        '</td>' + 
        '<td>' + 
        value + 
        '</td>' + 
        '<td>' + 
        ((value/valueTotal) * 100).toFixed(2) + 
        '</td>' + 
        '</tr>'; 
      tBodyContent += element; 
     }); 
     tBodyContent += 
       '<tr>' + 
       '<td>Total</td>' + 
       '<td>' + valueTotal + '</td>' + 
       '<td>' + 100 + '</td>' + 
       '</tr>'; 
     myPieChartLegend.html(tBodyContent); 
    }); 
});

而且它會產生這樣的：

所以它只是沒有在情態動詞的工作：

<div id="statistics-modal" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h1>Statistical Overview</h1> 
      </div> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <canvas id="pie-chart" width="250" height="250"></canvas> 
        </div> 
        <div class="col-sm-4"> 
         <table class="table" id="pie-data-table"> 
          <thead style="background-color: #f0ad4e; color: #FFF;"> 
           <tr> 
            <th>Name</th> 
            <th>Value</th> 
            <th>%</th> 
           </tr> 
          </thead> 
          <tbody id="pie-chart-legend-tbody"></tbody> 
         </table> 
        </div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div>

來源

2015-12-16 OmniOwl

加載模式後初始化圖表。你可以這樣做在shown.bs.modal處理

$('#myModal').on('shown.bs.modal', function (e) { 
    // do something... 
})

來源

2015-12-16 10:59:59 potatopeelings

謝謝，這解決了問題:) – OmniOwl

確保你摧毀圖表當您關閉模式太BTW。 – potatopeelings

那是「hidden.bs.modal」嗎？ – OmniOwl

回答

相關問題