如何将多个读数放入单个HTML中答案

【问题标题】：How to put multiple Canvasses into a single HTML如何将多个读数放入单个HTML中
【发布时间】：2021-04-09 22:33:27
【问题描述】：

我有三个 javascript 文件（每个文件的开头如下所示）。每个后续声明都在一个单独的文件中 - 因此变量名称重叠应该不是问题。

let ctx = document.getElementById('myChart').getContext('2d');
let labels = ['Banking', 'Finances', 'Shopping', 'Recreation', 'Healthcare', 'Transportation', 'Food and Drink'];
let colorHex = ['#FB3640', '#86A9C5', '#286CA1', '#77FAC', '#1C203D', '#798E9C', '#2A303D'];

let myChart = new Chart(ctx, {
  
  type: 'pie',
  data: {
    datasets: [{
      data: [10, 10, 10, 10, 10, 10, 10],
      backgroundColor: colorHex,
      borderWidth: [0,0,0,0,0,0,0]
    }],
    labels: labels,
  
  },
  options: {
    responsive: false,
    legend: {
      position: 'bottom'
    },
    
    
    plugins: {
      
      datalabels: {
        color: '#fff',
        anchor: 'end',
        align: 'start',
        offset: 10,
        borderWidth: 0,
        // borderColor: '#fff',
        borderRadius: 0,
        
        font: {
          size: '10',
          color: '#fff'
        },
        formatter: (value) => {
          return value + ' %';
        }
      }
    }
  }
})


let ctx2 = document.getElementById('myChart2').getContext('2d');
let labels2 = ['Banking', 'Finances', 'Shopping', 'Recreation', 'Healthcare', 'Transportation', 'Food and Drink'];
let colorHex2 = ['#FB3640', '#86A9C5', '#286CA1', '#77FAC', '#1C203D', '#798E9C', '#2A303D'];
let myChart2 = new Chart(ctx2, {
  
  type: 'pie',
  data: {
    datasets: [{
      data: [10, 10, 10, 10, 10, 10, 10],
      backgroundColor: colorHex,
      borderWidth: [0,0,0,0,0,0,0]
    }],
    labels: labels,
  
  },
  options: {
    responsive: false,
    legend: {
      position: 'bottom'
    },
    
    
    plugins: {
      
      datalabels: {
        color: '#fff',
        anchor: 'end',
        align: 'start',
        offset: 10,
        borderWidth: 0,
        // borderColor: '#fff',
        borderRadius: 0,
        
        font: {
          size: '10',
          color: '#fff'
        },
        formatter: (value) => {
          return value + ' %';
        }
      }
    }
  }
})

let ctx3 = document.getElementById('myChart3').getContext('2d');
let labels3 = ['Banking', 'Finances', 'Shopping', 'Recreation', 'Healthcare', 'Transportation', 'Food and Drink'];
let colorHex3 = ['#FB3640', '#86A9C5', '#286CA1', '#77FAC', '#1C203D', '#798E9C', '#2A303D'];
let myChart3 = new Chart(ctx3, {
  
  type: 'pie',
  data: {
    datasets: [{
      data: [10, 10, 10, 10, 10, 10, 10],
      backgroundColor: colorHex,
      borderWidth: [0,0,0,0,0,0,0]
    }],
    labels: labels,
  
  },
  options: {
    responsive: false,
    legend: {
      position: 'bottom'
    },
    
    
    plugins: {
      
      datalabels: {
        color: '#fff',
        anchor: 'end',
        align: 'start',
        offset: 10,
        borderWidth: 0,
        // borderColor: '#fff',
        borderRadius: 0,
        
        font: {
          size: '10',
          color: '#fff'
        },
        formatter: (value) => {
          return value + ' %';
        }
      }
    }
  }
})

但是，当我将它们嵌入到我的 html 文件中（如下所示）时，只会显示第一个。

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Viewer | Analysis</title>
  <link rel="stylesheet" href="../static/analysis.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
  <script src="./js/script.js"></script>

  
  <script src="Chart3.js" type="text/javascript"></script>
</head>

<body>
  <!-- <header class = "Header">Hi</header> -->
  
  <div class = "sidenav">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
  <script src="Chart.js" type="text/javascript"></script>

  <div class="Top-Box">
     
    <div class = "Translucent-Box">
       <h1 class = "Box-Header">Categorical Spending Left</h1>
       <canvas id= "myChart" height="250" width="250"></canvas>
     </div>
   
     <div class = "Translucent-Box">
       <h1 class = "Box-Header">Categorical Spending Center</h1>
       <canvas id = "myChart2" height="500" width="500"></canvas>
       <canvas class ="myChart2" width="640" height="480" style="position: absolute; z-index: 1"></canvas> 
     </div>  
   
     <div class = "Translucent-Box">
       <h1 class = "Box-Header">Categorical Spending Left</h1>
       <canvas id = "myChart3" height="250" width="250"></canvas>
     </div> 
   
   </div>
  


</body>

</html>

我已经被困了几个小时，因此非常感谢任何帮助。

谢谢

编辑：更奇怪的是我制作了一个 JSFiddle - https://jsfiddle.net/EDP1000/sc38nr2p/2/ - 它运行良好。但是，当我在 VSCode 中运行我的代码时，它不会。

【问题讨论】：

我觉得原因是你通过let定义了重复的变量名，比如labels或者colorHex 。
我不确定你是否可以使用可能重叠的“labels”和“colorHex”
它们在不同的文件中
你在控制台看到了什么？有什么错误吗？
没有错误 - 它根本没有显示任何我想要的图表

标签： javascript html css html5-canvas

【解决方案1】：

我认为使用let 来声明变量而不是全局声明是问题所在。如果所有其他元素（如字体和颜色）我只需要一次该信息，那么变化的信息只需要文件引用 ID 部分然后是标题，但会消除在本地声明而不是全局声明中重复的多个变量声明

【讨论】：

【解决方案2】：

我觉得这是一堆东西的组合。

您的语法非常混乱，还有很多 <div id = 'thing spaces'... 之类的东西。我也认为存在一些相互矛盾的绝对定位。

由于这些图表在您的示例中重复出现，因此我将该代码包装在一个函数中以清楚地确定变量的范围。

function createChart(whateverCanvasId) {
  let ctx = document.getElementById(whateverCanvasId).getContext('2d');
  // do whatever stuff...
}

createChart('myChart');
createChart('myChart2');
createChart('myChart3');

并把它放在一个非常简化的 CodePen 中。（我们不需要知道所有其他细节）

https://codepen.io/sheriffderek/pen/2f6bd5956c9f8bd928f957a4f09d8844?editors=0010

我不完全确定问题出在哪里...但请继续清理并剥离它，直到找到问题的根源。

【讨论】：