Question

我是ChartJS和javascript的新手。以下是我的代码段。我试图在单击按钮后在引导程序模式中加载带有图例的饼图/甜甜圈图。

任何人都可以帮助使用简单的JS。

（如果我的工作是希望以图例形式显示半甜甜圈图，可以吗？）

我尝试了几种方法来获得期望的结果，但是如果我使用它，而仍然没有使用它的加载空白模式，那么它就不会在页面加载时完美地工作。

Html Code
========== 
<!doctype html>
<html>

<head>
<title>Pie Chart</title>
<link rel="stylesheet"    
href="https://maxcdn.bootstrapcdn.com/bootstrap/css/bootstrap.min.css">
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"> 
</script>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 
</script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> 
</script>

</head>

<body>
   <!-- <canvas id="chart-area" width="1256" height="256" ></canvas>-->
   <div class="container-fluid">
   <a href="#" data-toggle="modal" data-target="#modChart">
   <button  type="button" class="btn btn-info btn-lg" data- 
   target="#modChart">Check DB</button></a>
   </div>
   <div class="modal fade" id="modChart" tabindex="-1" role="dialog" aria- 
   labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">
   <div class="modal-content">
   <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal">
   <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
   </button>
   <h4 class="modal-title" id="exampleModalLabel">Chart</h4>
   </div>
   <div class="modal-body">
   <canvas id="mycanvas" width="256" height="256"></canvas>
   </div>
   </div>
   </div>
   </div>
<!-- html code over-->
<script> 
//java script start here
//defining the Pie chart details
var config = {
    type: 'pie',
    data: {
        labels: ["USSD", "URP", "MyTsel App", "Chatbot"],
        datasets: [{
            backgroundColor: ['rgb(12, 146, 204)',
                'rgb(255, 67, 0)',
                'rgb(131, 0, 255)',
                'rgb(250, 255, 0)'
            ],
            borderColor: ['rgb(12, 146, 204)',
                'rgb(255, 67, 0)',
                'rgb(131, 0, 255)',
                'rgb(250, 255, 0)'
            ],
            data: [73, 17, 3, 7],
        }]
    },
    options: {
        responsive: true,
        legend: {
            position: 'bottom',
            labels: {
                fontColor: "black",
                boxWidth: 20,
                padding: 20
            }
        }
    }
}; //Graph defination over here
  //Graph defination

$('#modChart').on('shown.bs.modal',function(event){
var ctx = $("#mycanvas").get(0).getContext("2d");
    //var ctx = document.getElementById('chart-area').getContext('2d');
    window.myPie = new Chart(ctx, config);
});
</script>
</body>  
</html>

Answer 1

谢谢

我能够解决这个问题。如果需要，请按照下面的GITHUB链接获取更多详细信息。我已使用Flask Web框架，Panda来加载和读取CSV文件，用于客户端服务器通信的Ajax和JSON（以避免刷新和重新加载），Chartjs用于生成图表/图形，CSS用于生成脉冲显示运行状态的效果。

https://github.com/AG060982/flask-panda-chartjs-ajax-json-bootstrap_modal

在带有图例的引导程序模式中显示甜甜圈/饼图

1 个答案: