Question

我一直在使用ChartJS（在这里我使用标签数组，而不是每个数据点使用特定的x和y值）来实现折线图设计。我一直在尝试更改x轴标签的字体大小，但没有任何运气。我已经尝试了以下方法将x轴刻度设置为我想要的大小，但它不会更改x轴标签的字体大小：

options:{
     scales:{
          xAxis: [{
               ticks:{
                    fontSize: 6,
               }
           }]
       }
}

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

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);
                    }
                  }
                ]
              }
            }
          });

任何帮助将不胜感激。

Answer 1

更改xAxis => xAxes

xAxes:[{
  ticks:{
  fontColor:'black',
  fontSize: 6,
 }
}]

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

1 个答案: