首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用Chart.js -X轴标签并非全部显示

使用Chart.js -X轴标签并非全部显示
EN

Stack Overflow用户
提问于 2019-02-21 19:34:52
回答 1查看 12.4K关注 0票数 8

我使用Chart.js来绘制饼图/条形图,在线条图和条形图上,由于某种原因,所有的“x”轴标签都没有显示出来,但是在饼图中,它们是:

下面的代码已被使用,我希望使用的图形类型“类型”刚刚被更改:

代码语言:javascript
运行
复制
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
                }
            }]
        }
    }
});
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-21 19:40:35

我已经在Chart.js 2.0中测试了您的代码,无论是条还是行,它看起来都不错。图表采用x轴标签,具有:

代码语言:javascript
运行
复制
labels: ["Time Management", "Career Coach", "Stress & Wellbeing", "Note Taking", "Exam Prep", "Presentations"]

您看不到的原因是x轴标签的宽度太窄了。您可以通过扩展宽度或将标签旋转为垂直方向来解决此问题。

票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54814885

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档