Chart.js轴标签字体大小

wkyowqbh  于 2022-11-06  发布在  Chart.js
关注(0)|答案(8)|浏览(244)

在chart.js中,我如何设置x轴标签的字体大小而不触及全局配置?
我已经试过设置我的选项对象的“scaleFontSize”选项。我还试过设置:

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

y0u0uwnf1#

fontSize属性实际上在scales.xAxes.ticks中,而不是您所想的scales.xAxes中。
因此,您只需编辑属性,如下所示:

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

您可以看到fully working example in this jsFiddle,其结果如下:

kqlmhetl

kqlmhetl2#

chartjs 3.0的配置选项和属性已更改。当前我使用的是Chartjs 3.1.1Fonts现在用作对象。要更改x轴刻度的字体大小,您必须使用以下配置。

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

请检查这个jsfiddle范例。

bgibtngc

bgibtngc3#

试试看这个有用吗

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

d4so4syb4#

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'
                                }
                            }
                        }                       
                    }
                }
91zkwejq

91zkwejq5#

试试看这样行不行

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

scaleFontSize似乎不是有效的属性。

ttygqcqt

ttygqcqt6#

试试这个

Chart.defaults.global.defaultFontSize = 8;
bejyjqdl

bejyjqdl7#

请尝试以下简单的解决方案:

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

myChart.update();
5t7ly7z5

5t7ly7z58#

目前,我使用的是^2.9.4 chart.js。我已经尝试过这里发布的其他解决方案,并做了一些调整。

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

相关问题