Javascript 在图表中添加两个条形图数据时如何插入两个数据?
#图表JS问题#Javascript 在图表中添加两个条形图数据时如何插入两个数据?,javascript,charts,chart.js,bar-chart,Javascript,Charts,Chart.js,Bar Chart,#图表JS问题# 今天我在做一个项目,在那里我用表格数据画了一张图表。通过查阅文档,我绘制了这个图表。所有这些都设置好了,但我的项目经理让我比较同一轴上的两个图表,并将两个表中的数据值放在一起。这对我来说就像是挑战。我看了一些教程,所有这些都建议你应该将数据作为数组的数组,所以我这样做了,但它没有解决,所以我在这里发布这个问题。请阅读代码,然后根据此建议我如何将两个数据值放在同一个图形上 请帮助我在一个轴上插入两个数据值我想在同一个图表中绘制两个数据并显示 基于相同标签的比较。*请参阅代码片段,
今天我在做一个项目,在那里我用表格数据画了一张图表。通过查阅文档,我绘制了这个图表。所有这些都设置好了,但我的项目经理让我比较同一轴上的两个图表,并将两个表中的数据值放在一起。这对我来说就像是挑战。我看了一些教程,所有这些都建议你应该将数据作为数组的数组,所以我这样做了,但它没有解决,所以我在这里发布这个问题。请阅读代码,然后根据此建议我如何将两个数据值放在同一个图形上 请帮助我在一个轴上插入两个数据值
我想在同一个图表中绘制两个数据并显示 基于相同标签的比较。*
请参阅代码片段,如果有错误,请建议我*
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css2?family=Muli:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="vendor/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="vendor/dist/css/adminlte.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h3 style="text-align:center;">Patient Vs Dialyzer-Tubing Charge Comparision</h3><br><br>
<canvas id="bar-chart"></canvas>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</html>
<script>
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: [1,2,3,4],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [10,20,30,40],
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Patient vs Blood Tubing Charge '
}
}
});
</script>
患者与透析器导管费用比较
新图表(document.getElementById(“条形图”){
类型:'bar',
数据:{
标签:[1,2,3,4],
数据集:[
{
标签:“人口(百万)”,
背景色:[“3e95cd”、“8e5ea2”、“3cba9f”、“e8c3b9”、“c45850”],
数据:[10,20,30,40],
}
]
},
选项:{
图例:{display:false},
标题:{
显示:对,
文字:“患者与血液导管费用”
}
}
});
数据集是一个数组。可以指定多个对象。