时间戳

首页 > 解决方案 > Chart.js 第二个图表不会加载

javascript - Chart.js 第二个图表不会加载

问题描述

我遇到了 Chart.js 的问题。我已经做到了，以便图表可以根据选择的选择器更改其类型（我已经让它工作了）。我现在正在尝试在同一页面上加载第二个图表，并且还可以选择更改图表类型，但是当我将新图表放在 js 和 html 中时，它会加载一个空画布。如果有人对如何修复有任何想法，请告诉我。

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
  <title></title>

  <link rel="stylesheet" href="LeadsDash.css">

  <script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
</head>

<body>

  <!-- start: MAIN CONTENT -->
  <br><br><br>
  <h2 style="display: inline;">Here's a quick overview for you.</h2>
  <div class="container">
    <div class="wrapper">
      <div class="box">
        <button id="nextChart" onClick= "updateChartType()"><i  class="far fa-chart-bar"
      style="display: inline; float: right; height: 25px; width: 25px; margin-top: 15px; color: rgb(0, 0, 0);"></i></button>
      <i class="fas fa-cog"
    style=" display: inline; float: right; height: 25px; width: 25px; margin-top: 15px; margin-right: 20px; color: rgb(0, 0, 0);"></i>
    
    </div>
  </div>
  </div>
  <div class="container1">
    <div class="wrapper1">
        <div class="box1">
            <p>Date From</p><br>
            <input type="date" required style="width: 150px;">
        </div>
        <div class="box1">
            <p>Date To</p><br>
            <input type="date" required style="width: 150px;">
        </div>
        <div class="box1">
            <p>Campaign</p><br>
            <input type="text" required style="width: 150px;">
        </div>
        <div class="box1">
          <p>User</p><br>
          <input type="text" required style="width: 150px;">
        </div>
        <div class="box1">
          <p>Lead Status</p><br>
          <input type="text" required style="width: 150px;">
        </div>
          <button class="updateBtn" style="float: right;">Update</button>
    </div>
  </div>
  <div class="container2">
    <div class="wrapper2">
      <div class="controls">
        <select name="chartType" id="chartType" onchange="updateChartType()">
          <option value="line">Line</option>
          <option value="bar">Bar</option>
          <option value="pie">Doughnut</option>
        </select>
      </div>
      <div class="chart-container2" style="max-width: 1250px; min-width: 1250px;">
        <canvas id="myChart"></canvas>
      </div>       
      <div class="chart-container" style="max-width: 1250px; min-width: 1250px;">
        <canvas id="myChart1"></canvas>
      </div>
    </div>
  </div>

 <script src="LeadsDash.js"></script>

</body>

</html>

JS

// functionality for the "next" button to switch between selectors
$("#nextChart").click(function() {
    let isLastElementSelected = $('#chartType > option:selected').index() == $('#chartType > option').length -1;
    
    if (!isLastElementSelected) {     
        $('#chartType > option:selected').removeAttr('selected').next('option').attr('selected', 'selected'); } else {
           $('#chartType > option:selected').removeAttr('selected');
           $('#chartType> option').first().attr('selected', 'selected'); 
        }   
});

// hiding the HTML selectors 
$("#chartType").hide();

// the leads everyone has in order of labels
let leads = [1, 10, 10, 40, 20, 30, 45];
let people = ["Jeff", "Jannice", "Steve", "Jenna", "Fred", "Jeoff", "Brad"];

myData = {
        labels: people,
        // properties of the data
        datasets: [
          {
            label: "Total Leads",
            fill: false,
            data: leads,
            borderWidth: 1,
            backgroundColor: [
                'rgba(45, 170, 214, 0.6)',
                'rgba(255, 159, 64, 0.6)',
                'rgba(255, 205, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(255, 130, 130, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(122, 227, 114, 0.6)'
              ],
              borderColor: [
                'rgb(45, 170, 214)',
                'rgb(255, 159, 64)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)',
                'rgb(255, 130, 130)',
                'rgb(153, 102, 255)',
                'rgb(122, 227, 114)'
              ],
          }
        ]
    };


// Default chart defined with type: 'bar'
// building the onload chart
let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
    type: 'bar',
    data: myData,
    options: {
        plugins: {
            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    font: {
                        size: 16,
                        family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                    }
                }
            }
        }
    }
});

let ctl = document.getElementById('myChart1').getContext('2d');
let myChart1 = new Chart(ctl, {
    type: 'line',
    data: myData,
    options: {
        plugins: {
            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    font: {
                        size: 16,
                        family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                    }
                }
            }
        }
    }
});

// Function runs on chart type select update
function updateChartType() {
  // Rebuilding chart with changed chart type
   myChart.destroy();
   myChart = new Chart(ctx, {
     type: document.getElementById("chartType").value,
     data: myData,
   });

   myChart1.destroy();
   myChart1 = new Chart(ctl, {
     type: document.getElementById("chartType").value,
     data: myData,
   });
};

标签： javascripthtmlchartschart.js

解决方案

推荐阅读