[英]Mixed chart not showing both charts simultaneously chart.js
我正在以混合模式創建 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
已經能夠解決同一數據集中的堆疊線和條。 以下是工作代碼。
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.