首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >ChartJS:更改折线图上X轴标签的字体大小

ChartJS:更改折线图上X轴标签的字体大小
EN

Stack Overflow用户
提问于 2020-03-28 02:05:32
回答 1查看 575关注 0票数 0

我一直在使用ChartJS实现折线图设计(其中我使用标签数组,而不是每个数据点的特定x和y值)。我一直在尝试更改我的x轴标签的字体大小,但没有任何成功。我尝试使用以下方法将x轴刻度设置为我想要的大小,但它不会更改x轴标签的字体大小:

代码语言:javascript
运行
复制
options:{
     scales:{
          xAxis: [{
               ticks:{
                    fontSize: 6,
               }
           }]
       }
}

这是到目前为止我的图表的代码。使用上面相同的方法,除了yAxis之外,它将字体大小更改为我需要的大小。但是,它不能对xAxis执行此操作。

代码语言:javascript
运行
复制
var myChart= new Chart(document.getElementById("line-chart"), {
            type: 'line',
            data: {
              labels: ['Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
              datasets: [{ 
                // dummy values: enter user-data here for caloric intake according to labels.
                // Ex: data[0]=caloric intake on Monday, data[1]=caloric intake on Tuesday, etc...
                  data: [1200,1500,1600,1800,1400,600,1330], 
                  borderColor:"rgba(0,150,255, 1)",
                  borderWidth: 3,
                  lineTension: 0,
                  pointBackgroundColor: "white",
                  pointBorderColor: "rgba(0,150,255, 1)",
                  pointBorderWidth: 3,
                  pointRadius: 4,
                  fill: false
                }
              ],
            },
            options: {
              responsive: true,
              maintainAspectRatio: true,
              tooltips:{enabled:false},
              legend:{
                  display:false
              },
              scales:{
                  yAxes:[{
                      ticks:{
                          max:2000,
                          min:0,
                          fontColor: 'black',
                          fontSize: 8,
                      }
                  }],
                  xAxis:[{
                      ticks:{
                          fontColor:'black',
                          fontSize: 6,
                      }
                  }]
              },
              title: {
                display: true,
                // Can edit font-size
                fontSize: 15,
                fontColor: "black",
                text: 'Calories'
              },
              annotation:{
                events:["click"],
                annotations:[
                  {
                    drawTime: "beforeDatasetsDraw",
                    type: "box",
                    xScaleID: "x-axis-0",
                    yScaleID: "y-axis-0",
                    xMin: "Monday",
                    xMax: "Sunday",
                    yMin: 1200, // Enter lower-limit of goal here.
                    yMax: 1500, // Enter upper-limit of goal here.
                    backgroundColor: "rgba(0,255,0,0.5)",
                    borderColor: "rgb(0, 255, 0)",
                    borderWidth: 1,
                    onClick: function(e) {
                      console.log("Box", e.type, this);
                    }
                  }
                ]
              }
            }
          });

任何帮助都将不胜感激。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-28 03:17:06

更改xAxis => xAxes

代码语言:javascript
运行
复制
xAxes:[{
  ticks:{
  fontColor:'black',
  fontSize: 6,
 }
}]
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60891741

复制
相关文章

相似问题

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