英文:
Chart.js shrinking
问题
使用chart.js出现了一个新问题。
我的图表开始神秘地缩小到几乎看不见。
看起来这是chart.js中引入的一个新bug。
这种缩小效果显然不是预期的或者想要的。
var scanCountChart = new Chart("ScanCountChart", {
type: "bar",
data: {
labels: xVals,
datasets: [{
backgroundColor: barColors,
data: yVals
}]
},
options: {
plugins: {
tooltip: {
titleFont: {
size: 50
},
bodyFont: {
size: 30
},
footerFont: {
size: 15 // 默认情况下没有页脚
}
},
legend: { display: false },
zoom: {
limits: {
y: { min: 0, max: 100 },
y2: { min: -5, max: 5 }
},
}
},
scales: {
x: {
ticks: {
font: {
size: xFontSize
},
maxRotation: 45,
minRotation: 25
}
},
y: {
ticks: {
font: {
size: yFontSize
}
}
}
}
}
});
英文:
Using chart.js a new issue has appeared.
My charts have started mysteriously shrinking to nothing.
It looks like a new bug that has been introduced in chart.js.
This shrinking effect is obviously not intended or wanted.
var scanCountChart = new Chart("ScanCountChart", {
type: "bar",
data: {
labels: xVals,
datasets: [{
backgroundColor: barColors,
data: yVals
}]
},
options: {
plugins: {
tooltip: {
titleFont: {
size: 50
},
bodyFont: {
size: 30
},
footerFont: {
size: 15 // there is no footer by default
}
},
legend: { display: false },
zoom: {
limits: {
y: { min: 0, max: 100 },
y2: { min: -5, max: 5 }
},
}
},
scales: {
x: {
ticks: {
font: {
size: xFontSize
},
maxRotation: 45,
minRotation: 25
}
},
y: {
ticks: {
font: {
size: yFontSize
}
}
}
}
}
});
答案1
得分: 1
回答自己的问题。
解决方法似乎是添加 maintainAspectRatio: false。
var scanCountChart = new Chart("ScanCountChart", {
type: "bar",
data: {
labels: xVals,
datasets: [{
backgroundColor: barColors,
data: yVals
}]
},
options: {
maintainAspectRatio: false, // *** 重要：必须添加此项，否则图表会出现奇怪的缩小效果。
plugins: {
tooltip: {
titleFont: {
size: 50
},
bodyFont: {
size: 30
},
footerFont: {
size: 15 // 默认情况下没有页脚
}
},
legend: { display: false },
zoom: {
limits: {
y: { min: 0, max: 100 },
y2: { min: -5, max: 5 }
},
}
},
scales: {
x: {
ticks: {
font: {
size: xFontSize
},
maxRotation: 45,
minRotation: 25
}
},
y: {
ticks: {
font: {
size: yFontSize
}
}
}
}
}
});
英文:
Answering own question.
Solution appears to be adding maintainAspectRatio: false.
var scanCountChart = new Chart("ScanCountChart", {
type: "bar",
data: {
labels: xVals,
datasets: [{
backgroundColor: barColors,
data: yVals
}]
},
options: {
maintainAspectRatio: false, // *** Important : this is required or a strange vanishing zoom out effect occurs with the graph.
plugins: {
tooltip: {
titleFont: {
size: 50
},
bodyFont: {
size: 30
},
footerFont: {
size: 15 // there is no footer by default
}
},
legend: { display: false },
zoom: {
limits: {
y: { min: 0, max: 100 },
y2: { min: -5, max: 5 }
},
}
},
scales: {
x: {
ticks: {
font: {
size: xFontSize
},
maxRotation: 45,
minRotation: 25
}
},
y: {
ticks: {
font: {
size: yFontSize
}
}
}
}
}
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论