2020-09-21

   <script src="/js/ChartJs/Chart.js"></script>

     <div id="canvas-holder" style="width:30%;margin:0 auto;">
        <canvas id="chart-area" width="300" height="300" />
    </div>
 
    <script>
    
var colors = [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
];
    var config = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
                    {{ implode(",",array_values($data)) }}
                ],
                backgroundColor: [
                     @for($i=0;$i<count($data);$i++)
                    colors[{{ $i }} % colors.length],
                     @endfor
                  
                ],
                
            }, {
                data: [
                    {{ implode(",",array_values($data1)) }}
                ],
                backgroundColor: [
                    @for($i=0;$i<count($data1);$i++)
                    colors[{{ $i }}% colors.length],
                     @endfor
                   
                ],
                
            }],
            labels: [
              "{!! implode('","',array_keys($data)) !!}"
            ]
        },
        options: {
            responsive: true,
            tooltips: { 
               callbacks: { 
               label: function(tooltipItem, data) { 
                    //get the concerned dataset 
                    var dataset = data.datasets[tooltipItem.datasetIndex]; 
                    //calculate the total of this data set 
                    // var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) { 
                    // return previousValue + currentValue; 
                    // }); 
                    //get the current items value 
                    var currentValue = dataset.data[tooltipItem.index]; 
                    //calculate the precentage based on the total and current item, also this does a rough rounding to give a whole number 
                    // var precentage = Math.floor(((currentValue/total) * 100)+0.5); 
                    // console.log(tooltipItem, data);
                    if(tooltipItem.datasetIndex == 0){
                         return data.labels[tooltipItem.index]+"作品数:"+currentValue+"条" ; 
                    }
                    return data.labels[tooltipItem.index]+"学者数:"+currentValue+"条" ; 
                    } 
               } 
               },
               onClick: function(event, legendItem) {
                                   // console.log(legendItem[0]);
                    showSchools(legendItem[0]._model.label);
               }
        }
    };

    window.onload = function() {
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myDoughnut = new Chart(ctx, config);
        console.log(window.myDoughnut);
    };
 function showSchools(country){
     console.log(country);
     $(".schools ul").empty();
     $.get("/api/get_school_by_country/"+country,function(data){
          // console.log(data);
          for(var i = 0; i<data.length;i++){
               $(".schools ul").append("<li>"+data[i]+"</li>");
          }
               
         
     });
 }
   
    </script>

双环图表，带点击事件。