Chart JS不显示Chart

Question

我正在使用chart.js显示条形图。我已经用我的标签和数据集创建了一个对象，但是由于某种原因，没有显示任何图表，我不知道为什么。

目前，图表数据只是为了测试图表的工作情况。一旦点击“计算”，图表就会显示出来。首先，运行一些计算，然后该函数将新的html插入显示来自数组surveyResults的数据的正确部分，然后它应该使用对象chartResults显示一个图表，但是该图表没有显示。

谢谢。

​

const calculate = document.getElementById('one');

const resultsContainer = document.querySelector('.card-wrapper-results');

let myChart = document.getElementById('myChart').getContext('2d');

calculate.addEventListener('click', calc);

let surveyResults = [
    {
        savings: 10.23,
        price: 35.84
    }
];

let yearlySavings;
let scrappagePayment;
let smartPayment;

function calc() {
    event.preventDefault();
    let gas = parseFloat(document.getElementById('gas').value);
    let price = parseFloat(document.getElementById('price').value);
    let gasSaving;
    let smartSaving;
    let result;
    let totalSaving;
    smartSaving = gas * 0.2;
    gasSaving = gas * 0.3;
    totalSaving = smartSaving + gasSaving;
    surveyResults[0].savings = totalSaving;

    result = price - totalSaving;

    let chartResults = new Chart(myChart, {
        type: 'bar',
        data: {
            labels: [ 'Year 1', 'Yeat 2', 'Year 3', 'Year 4', 'Year 5', 'Year 6', 'Year 8', 'Year 9', 'Year 10' ],
            datasets: [
                {
                    label: 'Savings Per Year £',
                    data: [ 342, 410, 443, 501, 557, 602, 673, 702, 764, 823 ]
                }
            ]
        },
        options: {}
    });

    let displayResults = surveyResults.map(function(item) {
        console.log(item);
        return ` <div class="card2-results">


                <h1>Scrappage Payment </h1>
                <p class="job-title">Vaillant EcoTech Plus</p>
                <h2 class="about-h2">
                    £507.23
                </h2>
                <ul class="about-payment">
                    <li><i class="fas fa-check"></i> AAA+ Rated Vaillant Ecotech Plus</li>
                    <li><i class="fas fa-check"></i> 10 Year Guaranty</li>
                    <li><i class="fas fa-check"></i> Big Gas Bill Savings</li>
                    <li><i class="fas fa-check"></i> Which Boiler Of The Year</li>
                

                </ul>

                <a href="" class="btn-results">30% Lower Gas Bill</a>

            </div>
        
        <div class="card2-results">
            
            
                <h1>Monthly Gas Savings</h1>
                <p class="job-title">Instant Savings</p>
                <h2 class="about-h2">
                    £${item.savings.toFixed(2)}
                </h2>
                <ul class="about-payment">
                    <li><i class="fas fa-check"></i> Start Saving Straightaway</li>
                    <li><i class="fas fa-check"></i> 30% Saving From EcoTech Plus </li>
                    <li><i class="fas fa-check"></i> 18% Saving From Hive Smart Heating</li>
                    <li><i class="fas fa-check"></i> Hive Smart Heating System Included</li>
                
                
                </ul>
            
                <a href="" class="btn-results">1st Year £336</a>
            
            </div>
            
              <div class="card3">
            
            
                <h1>Yearly Gas Savings</h1>
                <p class="job-title">Gen 3 Smart Heating</p>
                <canvas id="myChart">
                    
                </canvas>
            
            </div>`;
    });
    resultsContainer.innerHTML = displayResults;
}

​

Answer 1

你遇到的问题是你调用函数的顺序。将图表元素的选择器移动到calc函数内，但移动到设置innerHTML的部分之后。这是因为HTML必须首先用新元素更新，然后您应该选择该元素并初始化画布。

const calculate = document.getElementById("one");
const resultsContainer = document.querySelector(".card-wrapper-results");
let surveyResults = [
  {
    savings: 10.23,
    price: 35.84,
  },
];

calculate.addEventListener("click", calc);

function calc(event) {
  event.preventDefault();

  // Do the calculations.
  let gas = parseFloat(document.getElementById("gas").value);
  let price = parseFloat(document.getElementById("price").value);
  let gasSaving;
  let smartSaving;
  let result;
  let totalSaving;
  smartSaving = gas * 0.2;
  gasSaving = gas * 0.3;
  totalSaving = smartSaving + gasSaving;
  surveyResults[0].savings = totalSaving;

  result = price - totalSaving;

  // Generate HTML to show the chart in.
  let displayResults = surveyResults.map((item) => `
    <div class="card2-results">
      <h1>Scrappage Payment</h1>
      <p class="job-title">Vaillant EcoTech Plus</p>
      <h2 class="about-h2">£507.23</h2>
      <ul class="about-payment">
      <li><i class="fas fa-check"></i> AAA+ Rated Vaillant Ecotech Plus</li>
      <li><i class="fas fa-check"></i> 10 Year Guaranty</li>
      <li><i class="fas fa-check"></i> Big Gas Bill Savings</li>
      <li><i class="fas fa-check"></i> Which Boiler Of The Year</li>
      </ul>
    
      <a href="" class="btn-results">30% Lower Gas Bill</a>
    </div>
    
    <div class="card2-results">
      <h1>Monthly Gas Savings</h1>
      <p class="job-title">Instant Savings</p>
      <h2 class="about-h2">£${item.savings.toFixed(2)}</h2>
      <ul class="about-payment">
      <li><i class="fas fa-check"></i> Start Saving Straightaway</li>
      <li><i class="fas fa-check"></i> 30% Saving From EcoTech Plus</li>
      <li><i class="fas fa-check"></i> 18% Saving From Hive Smart Heating</li>
      <li><i class="fas fa-check"></i> Hive Smart Heating System Included</li>
      </ul>
    
      <a href="" class="btn-results">1st Year £336</a>
    </div>
    
    <div class="card3">
      <h1>Yearly Gas Savings</h1>
      <p class="job-title">Gen 3 Smart Heating</p>
      <canvas id="myChart"></canvas>
    </div>
  `);

  // Canvas element exists after this line.
  resultsContainer.innerHTML = displayResults;

  // Now the myChart element is in the DOM, select it.
  let myChart = document.getElementById("myChart").getContext("2d");

  // Create a new chart.
  let chartResults = new Chart(myChart, {
    type: "bar",
    data: {
      labels: [
        "Year 1",
        "Year 2",
        "Year 3",
        "Year 4",
        "Year 5",
        "Year 6",
        "Year 8",
        "Year 9",
        "Year 10",
      ],
      datasets: [
        {
          label: "Savings Per Year £",
          data: [342, 410, 443, 501, 557, 602, 673, 702, 764, 823],
        },
      ],
    },
    options: {},
  });
}