javascript - 如何将多个画布放入单个 HTML
问题描述
我有三个 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
声明变量而不是全局声明是问题所在。如果所有其他元素(如字体和颜色)我只需要一次该信息,那么变化的信息只需要文件引用 ID 部分然后是标题,但会消除在本地声明而不是全局声明中重复的多个变量宣言
推荐阅读
- python - 为什么运行此代码时出现关键错误“0”
- java - 使用spring`@Retryable`注解时未抛出自定义异常
- python - 使用 Django 信号传递附加属性
- react-native - 代号一是否支持 Webp?
- excel - 如何在vba的命令栏中列出所有控件的名称
- python - 如何提高 OpenCV cv2.VideoCapture(0).read() 的性能
- angular - Angular 6使用@Output()在父级中捕获子组件值
- python - 如何在不重新训练模型的情况下获得 XGBoost 特征重要性图中的实际特征名称?
- python - 解析、删除和屏蔽 IP 地址的脚本
- python - Pandas:如何将一系列函数应用于多对列