BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Chart.jsのラベルの色

2022-02-10 19:50:37

質問内容

chart.jsを使って棒グラフを作っているのですが、ラベルの色や凡例の色を変えることができないようです。目盛りの色を変更する方法はわかりましたが、「scaleFontColor」をどこに置けばいいのかわかりません。

現在どのような状態になっているか、リンクを貼っておきます。 http://imgur.com/nxaH1mk

そして、これが私のコードです。 

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    scaleFontColor: "white",
    type: "bar",
    data: {
        labels: <?php echo json_encode($timeSlice); ?>, 
        datasets: [{
            label: "A Label",
            backgroundColor: "rgba(159,170,174,0.8)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(232,105,90,0.8)",
            hoverBorderColor: "orange",
            scaleStepWidth: 1,
            data: <?php echo json_encode($myCount); ?>
        }]
    },
    options: {
        legend: {
            fontColor: "white"
        },
        scales: { 
            yAxes: [{
                ticks: {
                    fontColor: "white",
                    stepSize: 1,
                    beginAtZero: true
                }
            }]
        }
    }
});

何かお手伝いいただけることがあれば、ぜひお願いします。

解決方法は？

グー解決しました、質問失礼します。でも、他の人が私の問題に遭遇したときのために、答えを残しておこうと思います。 

var ctx = document.getElementById("barChart");
    var myChart = new Chart(ctx, {
        type: "bar",
        data: {
            labels: ["label 1", "label 2"], 
            datasets: [{
                label: "My Label",
                backgroundColor: "rgba(159,170,174,0.8)",
                borderWidth: 1,
                hoverBackgroundColor: "rgba(232,105,90,0.8)",
                hoverBorderColor: "orange",
                scaleStepWidth: 1,
                  data: [4, 5]
            }]
        },
        options: { 
            legend: {
                labels: {
                    fontColor: "blue",
                    fontSize: 18
                }
            },
            scales: {
                yAxes: [{
                    ticks: {
                        fontColor: "green",
                        fontSize: 18,
                        stepSize: 1,
                        beginAtZero: true
                    }
                }],
                xAxes: [{
                    ticks: {
                        fontColor: "purple",
                        fontSize: 14,
                        stepSize: 1,
                        beginAtZero: true
                    }
                }]
            }
        }
    });

   <!-- Edit:
   chart.js recently released new version v3.x
   which is not backwards compatible with v2.x
   -->

<!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->

   <!-- above link gets you latest version of chart.js (at v3.3.2 now)
        hence snippet didn't work propperly anymore :-(
   -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

   <!-- above link gets you v2.9.4
        and snippet works agian  :-)
   -->

<div>
    <canvas id="barChart" height="140"></canvas>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します