web-dev-qa-db-ja.com

Chart.JSのラベルのフォント（ファミリ）を変更するにはどうすればよいですか？

Chart.JS水平棒グラフでフォントをより洗練されたものに変更したい。私は次のことを試しましたが、どれも機能しません：

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

私はこれがうまくいくことも読んだ：

Chart.defaults.global.defaultFont = "Georgia"

...しかし、このコードはどこに行き、どのように正確に見えるべきですか？私はこれを試しました：

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

...しかし、良い効果もありません。

画像/コンテキスト全体について、このチャートを構成するすべてのコードを次に示します。

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

私もこれを試しました：

CSS

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

HTML

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

...しかし、これを追加しても違いはないので、キャンバスの描画はフォントの外観を処理します。

更新

私はこれを試してみましたが、完全に壊れました：

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

更新2

マシューが推測したように、これは機能しました（チャート固有のスクリプトの前）：

Chart.defaults.global.defaultFontFamily = "Georgia";
javascriptjqueryhtmlcsschart.js2
12
B. Clay Shannon

これは役に立つはずです： http://www.chartjs.org/docs/ 。 「グラフ上のすべてのフォントを変更できる4つの特別なグローバル設定があります。これらのオプションはChart.defaults.global "。

フォントのdefaultFontFamilyを変更する必要があります。また、defaultFontColor、defaultFontSize、およびdefaultFontStyleは色、サイズなどについて.

12
Matthew Campbell

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'}}]
        }

完全なコードを見る

<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>
5
Super Model

フォントファミリをチャートオブジェクトに追加する場合は、オプションオブジェクトに追加できます。

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

ドキュメントへのリンクは次のとおりです。 https://www.chartjs.org/docs/latest/general/fonts.html

2
matoneski

コードの次の部分でチャートにpriceBarChartという名前を付けました。

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

つまり、priceBarChart.defaults.global.defaultFont = 'Georgia'は、変数priceBarChartに「飛び込み」、そのデフォルトプロパティに入り、そのグローバルプロパティの1つを変更し、その1つがdefaultFontになります。

しかし、このコードを適用すると、基本的に間違ったフォントでチャートを作成してから再度変更しますが、これは少し見苦しいです。あなたがする必要があるのは、フォントが事前に何であるかをチャートに伝えることです。

これを行うには、変数barChartDataおよびoptionsBarを使用してフォント宣言を行う方法と同様に、フォント宣言を残りのオプションとマージします。

barChartDataとoptionsBarを作成したら、次のように、名前がdefaultOptionsの別の変数を作成します。

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

同じ構造になっていることがわかります。グローバルオプションに移動し、defaultFontプロパティを変更します。次のように、作成されたチャートに作成された瞬間にそれを適用する必要があります。

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

このオプションの上書き方法は、ほぼすべてのJavaScriptプラグインで使用されています。 newインスタンスを作成すると、プラグインはオブジェクトなどを含むオブジェクトを含むオブジェクトをコピーします。ただし、これらのオブジェクトは、barChartData、optionsBar、defaultOptionsなどの追加オプションで変更できます。

これがお役に立てば幸いです！

1
Gust van de Wal