Chart.js 軸 label 字體大小

Question

在 chart.js 中，如何在不觸及全局配置的情況下僅設置 x 軸標簽的字體大小？

我已經嘗試在選項 object 中設置“scaleFontSize”選項。 我也試過設置：

{
  ...
  scales: {
    xAxes: [{
      scaleFontSize: 40
      ...
    }]
   }
}

Answer 1

fontSize屬性實際上在scales.xAxes.ticks而不是像您想象的那樣在scales.xAxes中。

所以你只需要像這樣編輯屬性：

var options = {
    scales: {
        yAxes: [{
            ticks: {
                fontSize: 40
            }
        }]
    }
}

---

你可以在這個 jsFiddle 中看到一個完整的例子，這是它的結果：

Answer 2

試試這個工作

 options: { scales: { xAxes: [{ ticks: { fontSize: 10 } }] } }

Answer 3

chartjs 3.0 的配置選項和屬性已更改。 目前我正在使用 Chartjs 3.1.1 。 字體現在用作對象。 為了更改 x 軸刻度的字體大小，您必須使用以下配置。

var options = {
    scales: {
        x: {
            ticks: {
                font: {
                    size: 12,
                }
            }
        }
    }
};

查看此jsfiddle示例。

Answer 4

嘗試看看這是否有效

{
  ...
  scales: {
    xAxes: [{
      fontSize: 40
      ...
    }]
   }
}

看起來scaleFontSize不是一個有效的屬性。

Answer 5

options: {
                  locale: 'fa-IR',
                  responsive: true, // Instruct chart js to respond nicely.
                  maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
                        plugins: {
                          legend: {
                              position: 'top',
                              labels: {
                                  font: {
                                    size: 9,
                                    family:'vazir'
                                  }
                             }
                          },
                          title: {
                            display: true,
                            text: chart_info.chartTitle,
                            font: {
                                size: 16,
                                family:'vazir'
                            }
                          },
                          tooltip: {
                              bodyFont: {
                                size: 13,
                                family:'vazir'
                              }
                         }
                    },
                    scales: {
                        x: {
                            ticks: {
                                font: {
                                    size: 10,
                                    family:'vazir'
                                }
                            }
                        },
                        y: {
                            ticks: {
                                font: {
                                    size: 10,
                                    family:'vazir'
                                }
                            }
                        }                       
                    }
                }

Answer 6

試試這個

Chart.defaults.global.defaultFontSize = 8;

Answer 7

目前，我正在使用 ^2.9.4 chart.js。 我已經嘗試過這里發布的其他解決方案並做了一些調整。 然后這完成了工作。

    options: {
    scales: {
      yAxes: [{
        ticks: {
          minor: {
             fontSize: 16
          }
        }
      }],
      xAxes: [{
        ticks: {
          minor: {
             fontSize: 16
          }
        }
      }]
     }
   }

Answer 8

需要注意的是，Chart.js 有不同的版本，它們有不同的選項 object。 在版本 3 及更高版本中，x 和 y 軸是 object，而在版本小於 3 中，它們被定義為數組。 例子，
對於版本 3 及更高版本，

 options: {
        scales: {
            y: {
                ticks: {
                    precision: 0
                }
            }
        }
    }

對於版本 3 及以下版本，

options: {  
    scales: {
        yAxes: [{
            ticks: {
                precision: 0
            }
        }]
    }
}

另外，請注意y和x分別變為yAxes和xAxes 。

在這種情況下，我使用的是 3.7.0 版本，並且可以正常工作，我使用的是 TypeScript

  options: {
      scales: {
          y: {
              ticks: {
                 color: 'black',        //to change color
                 font: {
                    size: 12,           //to change size
                    weight: 'bold',   
                  },
                },
              },
            },
          };

Answer 9

試試這個簡單的解決方案：

myChart.options.scales.yAxes[0].ticks.fontSize = 40 ;

myChart.update();