混合图表没有同时显示两个图表chart.js

Question

我正在混合模式下创建一个chart.js图，在这里我试图显示条形图和折线图。问题是条形图只有在我评论或删除线段时才会出现，否则对于两个线段(条形图和折线图(，我只能得到折线图。我试着在一个数据集下组合两个部分，但什么都没有显示。在解决问题时需要指导。我的js如下：

<canvas id="chart"></canvas>
<script>      
var file = 'TempData.csv';
d3.csv(file).then(makeChart);
function makeChart(days) {
var dayLabel = days.map(function(d){return d.Time});
var dayTemp = days.map(function(d) {return d.Value});
var dayHeap = days.map(function(d){return d.heap});
//Set Min for better visiable range
var minX = d3.min(dayTemp);
minX -= 10;
var chart = new Chart('chart', {
type: 'bar',
data: {
labels: dayLabel,
datasets: [
{
data: dayTemp,
backgroundColor: "rgba(217,83,79,0.75)"
}
]
},
type: 'line',
data: {
labels: dayLabel,
datasets: [
{
data: dayHeap,
backgroundColor: "rgba(51,51,51,0.5)"
}
]
},
options: {
title: {
display: true,
text: file
},
legend: {
display: true
},
scales: {
xAxes: [
{
ticks: {
suggestedMin: minX,
}
}
]
}
}
});
}
</script>

我的Tempdata.csv如下：

Time,Value,heap
Sun,80,190
Mon,90,180
Tue,70,150
Wed,80,120
Thu,95,170
Fri,89,199
Sat,75,160

Answer 1

已经能够解析同一数据集中的堆叠线和条。以下是工作代码。

<script>
var file = 'TempData.csv';
d3.csv(file).then(makeChart);
function makeChart(days) {
var dayLabel = days.map(function(d){return d.Time});
var dayTemp = days.map(function(d) {return d.Value});
var dayHeap = days.map(function(d){return d.heap});
//Set Min for better visiable range
var minX = d3.min(dayTemp);
minX -= 10;
var chart = new Chart('chart', {
type: 'bar',
data: {
labels: dayLabel,
datasets: [
{
type:'bar',
data: dayTemp,
backgroundColor: "rgba(217,83,79,0.75)"
},
{
type:'line',
data:dayHeap,
backgroundColor: "rgba(51,51,51,0.5)"
},
]
//         },
},
options: {
title: {
display: true,
text: file
},
legend: {
display: true
},
scales: {
xAxes: [
{
ticks: {
suggestedMin: minX,
}
}
]
}
}
}
)};
</script>