HTML页面的单行中有多个甜甜圈图和饼图

时间：2019-02-15 10:13:01

标签： javascript charts

我已经连续使用了4个图表，2个甜甜圈和2个饼。该代码在chrome，Edge，Firefox和Internet Explorer以外的其他浏览器上都可以正常工作。请帮忙..！！！ 下面是代码：

$(document).ready(function() {


    var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
        //return 0;
    };
    var randomColorFactor = function() {
        return Math.round(Math.random() * 255);
    };
    var randomColor = function(opacity) {
        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
    };




    // doughnut example

    var DoughtnutConfig = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
                    22000,
                    46000,
                ],
                backgroundColor: [
                    //"#F7464A",
                    "#fe6271",
                    "#28bebd"
                    //"#8dcd8d",
                    //"#2da510","#57c5a5"
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Non-electrified",
                "Electrified",
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
            }
        }
    };

    var DoughtnutConfig1 = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
                    17244,
                    16976,
                ],
                backgroundColor: [
                    "#FDB45C",
                    "#acaccf",
                   // "#115c9b",
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Manned LC",
                "Unmanned LC",
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
            }
        }
    };

    // pie chart example
    var PieConfig = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    11394,
                    119382,
                ],
                backgroundColor: [
                    "#46BFBD",
                    "#FDB45C",
                ],
            }],
            labels: [
                "Imp./Major Bridge",
                "Minor Bridge",
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
            }
        }
    };

     var PieConfig1 = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    5976,
                    484,
                    2153,
                ],
                backgroundColor: [
                    //"#F7464A",
                    "#fe6271",
                    "#46BFBD",
                    "#949FB1",
                ],
            }],
            labels: [
                 "Non-Suburban (NSG)",
                 "Suburban (SG)",
                 "Halt (HG)",
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
            }
        }
    };


    window.onload = function() {

        window.myDoughnut = new Chart(document.getElementById("doughnutChart"), DoughtnutConfig);
        window.myDoughnut1 = new Chart(document.getElementById("doughnutChart1"), DoughtnutConfig1);
        window.myPie = new Chart(document.getElementById("pieChart"), PieConfig);
        window.myPie1 = new Chart(document.getElementById("pieChart1"), PieConfig1);
    };

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<div class="row text-center">
    <div class="services-contents">
      <!-- Start Left services -->
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="about-move">
          <div class="services-details">
            <div class="single-services">
                <canvas id="doughnutChart" height="200"></canvas>

            </div>
          </div>
          <!-- end about-details -->
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="about-move">
          <div class="services-details">
            <div class="single-services">
              <canvas id="pieChart" height="200"></canvas>
            </div>
          </div>
          <!-- end about-details -->
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <!-- end col-md-4 -->
        <div class=" about-move">
          <div class="services-details">
            <div class="single-services">
              <canvas id="doughnutChart1" height="200"></canvas>
            </div>
          </div>
          <!-- end about-details -->
        </div>
      </div>
     <div class="col-md-3 col-sm-6 col-xs-12">
        <!-- end col-md-4 -->
        <div class=" about-move">
          <div class="services-details">
            <div class="single-services">
              <canvas id="pieChart1" height="200"></canvas>
            </div>
          </div>
          <!-- end about-details -->
        </div>
      </div>
    </div>
  </div>

1 个答案:

答案 0 :(得分：0)

将分配移至window.onload 

window.onload = function() {
    window.myDoughnut = new Chart(document.getElementById("doughnutChart"), DoughtnutConfig);
    window.myDoughnut1 = new Chart(document.getElementById("doughnutChart1"), DoughtnutConfig1);
    window.myPie = new Chart(document.getElementById("pieChart"), PieConfig);
    window.myPie1 = new Chart(document.getElementById("pieChart1"), PieConfig1);
};

这是不需要的，因为代码已经在jquery的-> $(document).ready

内部 
window.myDoughnut = new Chart(document.getElementById("doughnutChart"), DoughtnutConfig);
window.myDoughnut1 = new Chart(document.getElementById("doughnutChart1"), DoughtnutConfig1);
window.myPie = new Chart(document.getElementById("pieChart"), PieConfig);
window.myPie1 = new Chart(document.getElementById("pieChart1"), PieConfig1);

请参阅以下工作片段... 

$(document).ready(function() {
    var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
        //return 0;
    };
    var randomColorFactor = function() {
        return Math.round(Math.random() * 255);
    };
    var randomColor = function(opacity) {
        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
    };

    // doughnut example
    var DoughtnutConfig = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
                    22000,
                    46000,
                ],
                backgroundColor: [
                    //"#F7464A",
                    "#fe6271",
                    "#28bebd"
                    //"#8dcd8d",
                    //"#2da510","#57c5a5"
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Non-electrified",
                "Electrified",
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
            }
        }
    };

    var DoughtnutConfig1 = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
                    17244,
                    16976,
                ],
                backgroundColor: [
                    "#FDB45C",
                    "#acaccf",
                   // "#115c9b",
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Manned LC",
                "Unmanned LC",
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
            }
        }
    };

    // pie chart example
    var PieConfig = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    11394,
                    119382,
                ],
                backgroundColor: [
                    "#46BFBD",
                    "#FDB45C",
                ],
            }],
            labels: [
                "Imp./Major Bridge",
                "Minor Bridge",
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
            }
        }
    };

     var PieConfig1 = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    5976,
                    484,
                    2153,
                ],
                backgroundColor: [
                    //"#F7464A",
                    "#fe6271",
                    "#46BFBD",
                    "#949FB1",
                ],
            }],
            labels: [
                 "Non-Suburban (NSG)",
                 "Suburban (SG)",
                 "Halt (HG)",
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
            }
        }
    };


    window.myDoughnut = new Chart(document.getElementById("doughnutChart"), DoughtnutConfig);
    window.myDoughnut1 = new Chart(document.getElementById("doughnutChart1"), DoughtnutConfig1);
    window.myPie = new Chart(document.getElementById("pieChart"), PieConfig);
    window.myPie1 = new Chart(document.getElementById("pieChart1"), PieConfig1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
 <div class="row text-center">
    <div class="services-contents">
      <!-- Start Left services -->
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="about-move">
          <div class="services-details">
            <div class="single-services">
                <canvas id="doughnutChart" height="200"></canvas>

            </div>
          </div>
          <!-- end about-details -->
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="about-move">
          <div class="services-details">
            <div class="single-services">
              <canvas id="pieChart" height="200"></canvas>
            </div>
          </div>
          <!-- end about-details -->
        </div>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <!-- end col-md-4 -->
        <div class=" about-move">
          <div class="services-details">
            <div class="single-services">
              <canvas id="doughnutChart1" height="200"></canvas>
            </div>
          </div>
          <!-- end about-details -->
        </div>
      </div>
     <div class="col-md-3 col-sm-6 col-xs-12">
        <!-- end col-md-4 -->
        <div class=" about-move">
          <div class="services-details">
            <div class="single-services">
              <canvas id="pieChart1" height="200"></canvas>
            </div>
          </div>
          <!-- end about-details -->
        </div>
      </div>
    </div>
  </div>

相关问题
最新问题