Question

似乎我无法在模态窗口中放置使用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>

Answer 1

加载模态后初始化图表。您可以在shown.bs.modal处理程序

中执行此操作

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

＆＃34;提供的半径（-0.5）为负值＆＃34;与Modal一起使用时

1 个答案: