web-dev-qa-db-de.com

Wie kann ich die Schriftart (Familie) für die Beschriftungen in Chart.JS ändern?

Ich möchte die Schriftart in meinem horizontalen Balkendiagramm Chart.JS in ein etwas schärferes Format umwandeln. Ich habe folgendes versucht, aber nichts davon funktioniert:

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

Ich habe auch gelesen, dass dies funktionieren würde:

Chart.defaults.global.defaultFont = "Georgia"

... aber wohin würde dieser Code gehen und wie sollte er genau aussehen? Ich habe das versucht:

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

... aber auch nicht gut.

Hier finden Sie den gesamten Code, der dieses Diagramm ausmacht:

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";

Ich habe es sogar ausprobiert:

CSS

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

HTML

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

... aber ich denke, die Leinwand-Zeichnung kümmert sich um das Erscheinungsbild der Schrift, da das Hinzufügen keinen Unterschied macht.

AKTUALISIEREN

Ich habe es ausprobiert und es ist völlig kaputt gegangen:

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

UPDATE 2

Wie Matthew angedeutet hatte, funktionierte dies (vor irgendeinem der chartspezifischen Skripte):

Chart.defaults.global.defaultFontFamily = "Georgia";
8
B. Clay Shannon

Dies sollte nützlich sein: http://www.chartjs.org/docs/ . Es heißt "Es gibt 4 spezielle globale Einstellungen, die alle Schriftarten im Diagramm ändern können. Diese Optionen befinden sich in Chart.defaults.global".

Sie müssen defaultFontFamily für die Schriftart ändern. Und defaultFontColor, defaultFontSize und defaultFontStyle für Farbe, Größe usw.

7

Wenn Sie die Schriftfamilie zum Diagrammobjekt hinzufügen möchten, können Sie sie im Optionsobjekt hinzufügen.

options: {
  legend: {
    labels: { 
      fontFamily: 'YourFont'
    }
  }...}

Hier ist ein Link zu den Dokumenten: https://www.chartjs.org/docs/latest/general/fonts.html

2
matoneski

Ändern Sie die Schriftgröße, Farbe, Familie und das Gewicht mit 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'}}]
        }

Siehe vollständiger Code

<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

Sie haben den Chart priceBarChart im folgenden Teil Ihres Codes benannt:

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

Das bedeutet, dass priceBarChart.defaults.global.defaultFont = 'Georgia' in die Variable priceBarChart eintaucht, seine Standardeigenschaften verwendet, eine der globalen Eigenschaften ändert und dass es defaultFont ist, genau wie Sie es möchten.

Wenn Sie diesen Code anwenden, erstellen Sie im Grunde das Diagramm mit der falschen Schriftart und ändern es erneut, was etwas hässlich ist. Was Sie tun müssen, ist, dem Diagramm vorher die Schriftart zu sagen.

Sie tun dies, indem Sie Ihre Zeichensatzdeklaration mit den restlichen Optionen zusammenführen, genau wie Sie es mit Ihren Variablen barChartData und optionsBar getan haben.

Nachdem Sie barChartData und optionsBar erstellt haben, erstellen Sie eine weitere Variable mit dem Namen, beispielsweise defaultOptions, wie folgt:

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

Sie können sehen, dass es die gleiche Struktur hat. Sie gehen in die globalen Optionen und ändern ihre defaultFont -Eigenschaft. Jetzt müssen Sie es in dem Moment, in dem es erstellt wird, auf das erstellte Diagramm anwenden:

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

Diese Methode zum Überschreiben von Optionen wird in fast jedem JavaScript-Plugin verwendet. Wenn Sie eine new-Instanz erstellen, kopiert das Plugin ein Objekt, das Objekte enthält, die Objekte usw. enthalten. Diese Objekte können jedoch mit zusätzlichen Optionen wie barChartData, optionsBar und defaultOptions geändert werden.

Ich hoffe das hilft!

1
Gust van de Wal