javascript - 使用 Chart.js - X 轴标签并未全部显示
问题描述
我将 Chart.js 用于我的饼图/条形图,并且在折线图和条形图中,由于某种原因,所有“x”轴标签并未全部显示,但在饼图中它们是:
下面的代码已被使用,并且“类型”刚刚针对我希望使用的图形类型进行了更改:
var ctx = document.getElementById("my3Chart");
var mylineChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Time Management", "Career Coach", "Stress & Wellbeing", "Note Taking", "Exam Prep", "Presentations"],
datasets: [{
label: 'Module Tracker',
data: [6, 4, 2, 0, 3, 1],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
解决方案
I've tested your code in a fiddle with Chart.js 2.0
for both bar/line and it looks fine. Chart takes in x-axis labels with:
labels: ["Time Management", "Career Coach", "Stress & Wellbeing", "Note Taking", "Exam Prep", "Presentations"]
The reason you can't see all your x-axis labels is that the width's are too thin. You can fix this by either expanding your width, or rotating your labels to be vertical instead.
- 400px width example: https://jsfiddle.net/swcy2opv/
- Rotated labels example: https://jsfiddle.net/swcy2opv/1/
推荐阅读
- javascript - p5.js createCanvas 不再呈现。ngOnInit const 未被访问
- hbase - 有人可以从“HBase:权威指南”一书中解释这个图吗?
- c# - SQLite 真正的所有字符串行
- python - 即使 index_col=None,Pandas read_excel 有时也会创建索引
- python - 在python 3中超出范围的索引处将元素添加到列表中
- c++ - 重用“rechnung()”,即使它不应该
- openrefine - 如何连接列的单元格的值,但前提是满足基于另一列的条件
- json - 在使用 Html.BeginForm 创建的表单标签的属性中使用 JSON
- python - 如何根据条件从列表列表中删除列表?
- java - Tomcat关闭导致执行程序服务数据丢失?