Comment puis-je changer la police (famille) pour les étiquettes dans Chart.JS?

Je souhaite modifier la police pour qu’elle soit plus élégante dans mon graphique à barres horizontales Chart.JS. J’ai essayé ce qui suit, mais rien de tout cela ne fonctionne:

var optionsBar = { . . . //fontFamily: "'Candara', 'Calibri', 'Courier', 'serif'" //bodyFontFamily: "'Candara', 'Calibri', 'Courier', 'serif'" //bodyFontFamily: "'Candara'" label: { font: { family: "Georgia" } } };

J’ai aussi lu que cela fonctionnerait:

 Chart.defaults.global.defaultFont = "Georgia"

… mais où irait ce code et à quoi exactement devrait-il ressembler? J’ai essayé ceci:

 priceBarChart.defaults.global.defaultFont = "Georgia";

… mais aussi à pas bon effet.

Pour l’image complète / contexte, voici tout le code qui compose ce tableau:

HTML

JQUERY

  var ctxBarChart = $("#priceComplianceBarChart").get(0).getContext("2d"); var barChartData = { labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"], datasets: [ { label: "Price Compliant", backgroundColor: "rgba(34,139,34,0.5)", hoverBackgroundColor: "rgba(34,139,34,1)", data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553] }, { label: "Non-Compliant", backgroundColor: "rgba(255, 0, 0, 0.5)", hoverBackgroundColor: "rgba(255, 0, 0, 1)", data: [170, 10, 180, 140, 30, 10, 50, 100, 10] } ] } var optionsBar = { scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] }, //fontFamily: "'Candara', 'Calibri', 'Courier', 'serif'" //bodyFontFamily: "'Candara', 'Calibri', 'Courier', 'serif'" //bodyFontFamily: "'Candara'" //Chart.defaults.global.defaultFont = where does this go? label: { font: { family: "Georgia" } } }; var priceBarChart = new Chart(ctxBarChart, { type: 'horizontalBar', data: barChartData, options: optionsBar }); //priceBarChart.defaults.global.defaultFont = "Georgia";

J’ai même essayé ceci:

CSS

 .candaraFont13 { font-family:"Candara, Georgia, serif"; font-size: 13px; }

HTML

… mais j’estime que le dessin sur canvas prend en charge l’apparence de la police, son ajout ne faisant aucune différence.

METTRE À JOUR

J’ai essayé ceci et ça l’a complètement cassé:

 Chart.defaults.global = { defaultFontFamily: "Georgia" }

MISE À JOUR 2

Comme Matthew l’a indiqué, cela a fonctionné (avant tout script spécifique au graphique):

 Chart.defaults.global.defaultFontFamily = "Georgia";

Cela devrait être utile: http://www.chartjs.org/docs/ . “Il existe 4 parameters globaux spéciaux pouvant modifier toutes les fonts du graphique. Ces options figurent dans Chart.defaults.global “.

Vous devrez modifier defaultFontFamily pour la police. Et defaultFontColor , defaultFontSize et defaultFontStyle pour la couleur, la taille, etc.

Changer la taille de la police, la couleur, la famille et le poids en utilisant chart.js

 scales: { yAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}], xAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}] }

Voir le code complet

  Chart.js

Vous avez nommé le graphique priceBarChart dans la partie suivante de votre code:

 var priceBarChart = new Chart(ctxBarChart, { type: 'horizontalBar', data: barChartData, options: optionsBar })

Ce qui signifie que priceBarChart.defaults.global.defaultFont = 'Georgia' va ‘plonger’ dans la variable priceBarChart, entrer dans ses propriétés par défaut, modifier l’une de ses propriétés globales et qu’il s’agisse de defaultFont, exactement ce que vous voulez.

Mais lorsque vous appliquez ce code, vous créez essentiellement le graphique avec la mauvaise police, puis vous le modifiez à nouveau, ce qui est un peu moche. Ce que vous devez faire, c’est dire au tableau quelle est la police à l’avance.

Pour ce faire, vous fusionnez votre déclaration de police avec le rest des options, tout comme vous l’avez fait avec vos variables barChartData et optionsBar .

Après avoir créé barChartData et optionsBar , créez une autre variable portant le nom, par exemple, defaultOptions , comme defaultOptions :

 var defaultOptions = { global: { defaultFont: 'Georgia' } }

Vous pouvez voir qu’il a la même structure. Vous allez dans les options globales et changez sa propriété defaultFont. Maintenant, vous devez l’appliquer au graphique créé au moment où il est créé, comme suit:

 var priceBarChart = new Chart(ctxBarChart, { type: 'horizontalBar', data: barChartData, options: optionsBar, defaults: defaultOptions //This part has been added })

Cette méthode d’options de réécriture est celle qui est utilisée dans presque tous les plugins JavaScript. Lorsque vous créez une new instance, le plug-in copie un object contenant des objects contenant des objects, etc. Mais ces objects peuvent être modifiés avec des options supplémentaires, telles que barChartData , optionsBar et defaultOptions .

J’espère que ça aide!