javascript - 我遇到了一个问题,我使用 chart.js 的图表直到我在标签按钮上点击 3 次才出现
解决方案
看看这是否适合你:
(async function() {
var url = "https://api.covid19india.org/data.json";
var response = await fetch(url);
var data = await response.json();
var barChartData = {
labels: data.statewise
.filter(({
state
}) => state !== "Total")
.map(({
state
}) => state),
datasets: [{
label: "Confirmed cases",
backgroundColor: "rgba(255,99,134,0.5",
borderWidth: 1,
data: data.statewise
.filter(({
state
}) => state !== "Total")
.map(({
confirmed
}) => confirmed),
}, ],
};
var lineChartData = {
labels: data.cases_time_series.map(({
date
}) => date),
datasets: [{
fill: false,
label: "Confirmed cases",
backgroundColor: "rgba(255,99,134,0.5",
borderWidth: 1,
data: data.cases_time_series.map(
({
totalconfirmed
}) => totalconfirmed
),
},
{
fill: false,
label: "Deceased",
backgroundColor: "rgba(99,255,134,0.5",
borderWidth: 1,
data: data.cases_time_series.map(
({
totaldeceased
}) => totaldeceased
),
},
],
};
var ctx = document.getElementById("canvas").getContext("2d");
var ctx1 = document.getElementById("canvas1").getContext("2d");
window.myBar = new Chart(ctx, {
type: "bar",
data: barChartData,
options: {
responsive: true,
legend: {
position: "top",
},
title: {
display: true,
text: "States with most no. of cases",
},
},
});
window.myLine = new Chart(ctx1, {
type: "line",
data: lineChartData,
options: {
responsive: true,
legend: {
position: "top",
},
title: {
display: true,
text: "Number of cases/deceased over time",
},
},
});
})();
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>COVID-19 in India</title>
</head>
<body>
<div id="container" style="width: 75%;">
<p>
<canvas id="canvas"></canvas>
</p>
<p>
<canvas id="canvas1"></canvas>
</p>
</div>
</body>
</html>
推荐阅读
- javascript - Exif.js 总是返回“未定义”
- angular - Angular:测试是否执行了 EventEmitter 订阅回调
- spring-boot - SpringBootTest 中基于系统变量的活动配置文件
- javascript - vue.js:替换异步钩子
- python - 更改大小写以降低
- linux - 为什么linux版本的系统二进制文件和系统release版本不一致?
- angular - 通过内联样式在 Angular 6 模板中显示图像 - 安全问题
- java - jboss没有在部署文件夹中选择战争
- javascript - JavaScript 中是否有任何内置方法来查找数字的阶乘?
- angular - 如何以角度验证可编辑内容 td?