web-dev-qa-db-fra.com

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

Je veux changer la police pour quelque chose de plus élégant 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

<div class="chart">
    <canvas id="top10ItemsChart" class="pie"></canvas>
    <div id="pie_legend"></div>
</div>

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

<div class="graph_container candaraFont13">
    <canvas id="priceComplianceBarChart"></canvas>
</div>

... mais je pense que le dessin sur toile prend en charge l'apparence de la police, son ajout ne faisant aucune différence.

METTRE À JOUR

J'ai essayé cela 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";
javascriptjqueryhtmlcsschart.js2
8
B. Clay Shannon

Cela devrait être utile: http://www.chartjs.org/docs/ . "Il y a 4 paramètres globaux spéciaux qui peuvent changer toutes les polices du graphique. Ces options sont en Chart.defaults.global".

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

7
Matthew Campbell

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

<head>
    <title>Chart.js</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <script src="js/Chart.bundle.js"></script>
    <script src="js/utils.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            font-weight:700;  
        }
    </style>
</head>
<body>
    <div id="container" style="width:70%;">
        <canvas id="canvas"></canvas>
    </div>
    <script>
        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var color = Chart.helpers.color;
        var barChartData = {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [{
                    label: 'Completed',
                    // Green
                    backgroundColor: '#4caf50',
                    borderColor: '#4caf50',
                    borderWidth: 1,
                    data: [
                        5, 15, 25, 35, 45, 55
                    ]
                }, {
                    label: 'Created',
                    // Blue
                    backgroundColor: '#1976d2',
                    borderColor: '#1976d2',
                    borderWidth: 1,
                    data: [
                        10, 20, 30, 40, 50, 60
                    ]
                }]

        };

        window.onload = function () {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                        onClick: null
                    },

                    title: {
                        display: true,
                        text: '',
                        fontSize: 20
                    },
                    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'}}]
                    }
                }
            });
        };
    </script>
</body>

2
Super Model

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, changer l'une de ses propriétés globales et que celle-ci est 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 reste des options, 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, disons, defaultOptions, comme suit:

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 utilisée dans presque tous les plugins JavaScript. Lorsque vous créez une instance new, le plug-in copie un objet contenant des objets contenant des objets, etc. Mais ces objets peuvent être modifiés avec des options supplémentaires, telles que barChartData, optionsBar et defaultOptions.

J'espère que ça aide!

1
Gust van de Wal