web-dev-qa-db-ja.com

Chart.jsを使用して折れ線グラフのラベルフォントの色を変更する

Chart.jsを使用していくつかのグラフを生成しています。折れ線グラフにはラベルが必要です。それらのラベルの色を変更する方法がわからないようです。

var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
        labels : ["3/14","3/15","3/16","3/17","3/18","3/19","3/20","3/21","3/22","3/23"],
        datasets : [
            {
                fillColor : chartGood,
                strokeColor : "rgba(255,255,255,1)",
                pointColor : "rgba(50,182,93,1)",
                pointStrokeColor : "#fff",
                data : [12, 21, 28, 29, 31, 55, 52, 50, 49, 59]
            }
        ]
    }

var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d")).Line(lineChartData);

私はもう試した：

labelColor : "#fff",

legend : {
    font : {
        color : "#fff"
    }
}

label : {
    font : {
        color : "#fff"
    }
}

そして、他のいくつかの組み合わせですが、何も機能していないようです。探していたものが docs で見つかったと思いました

//String - Scale label font colour  
    scaleFontColor : "#fff",

しかし、それでも私の問題は解決しませんでした。

javascriptchartslinechart
12
Ryan Rich

はい、scaleFontColorオプションはラベルの色を変更します。

あなたはおそらくそれをデータオブジェクトに追加しようとしたので、それは機能しませんでした。実際には、次のようにLine関数の2番目のパラメーターとして渡す必要があります。

var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d"))
    .Line(lineChartData, { scaleFontColor: "#ff0000" });

編集：

同様に、フォントサイズを変更するには、scaleFontSizeを使用します。

例：

scaleFontSize: 16
16
vortexwolf