Question

我正在使用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
                }
            }]
        }
    }
});

非常感谢任何帮助。

Answer 1

Guh我解决了，抱歉这个问题。但我想我会留下答案，万一其他人遇到我的问题。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: "bar",
    data: {
        labels: <?php echo json_encode($timeSlice); ?>, 
        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: <?php echo json_encode($myCount); ?>
        }]
    },
    options: { 
        legend: {
            labels: {
                fontColor: "white",
                fontSize: 18
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 18,
                    stepSize: 1,
                    beginAtZero: true
                }
            }],
            xAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 14,
                    stepSize: 1,
                    beginAtZero: true
                }
            }]
        }
    }
});

Answer 2

来自@PhantomSalt 的好问题和好答案

他的回答非常适合....... chart.js v2.xx
我修改了他的好代码以使用.. chart.js v3.xx

（v3.xx 不向后兼容 v2.xx）

// var ctx = document.getElementById("barChart")
const ctx = document.getElementById("barChart").getContext("2d"); // added '.getContext("2d")'

const 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: {
    plugins: {  // 'legend' now within object 'plugins {}'
      legend: {
        labels: {
          color: "blue",  // not 'fontColor:' anymore
          // fontSize: 18  // not 'fontSize:' anymore
          font: {
            size: 18 // 'size' now within object 'font {}'
          }
        }
      }
    },
    scales: {
      y: {  // not 'yAxes: [{' anymore (not an array anymore)
        ticks: {
          color: "green", // not 'fontColor:' anymore
          // fontSize: 18,
          font: {
            size: 18, // 'size' now within object 'font {}'
          },
          stepSize: 1,
          beginAtZero: true
        }
      },
      x: {  // not 'xAxes: [{' anymore (not an array anymore)
        ticks: {
          color: "purple",  // not 'fontColor:' anymore
          //fontSize: 14,
          font: {
            size: 14 // 'size' now within object 'font {}'
          },
          stepSize: 1,
          beginAtZero: true
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- gets you the latest version of Chart.js, now at v3.3.2 -->

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

Answer 3

在数据集中，为属性 borderColor 指定颜色。

data: {
    labels: [1, 2, 3, 4, 5],
    datasets: [
        {
            data: temp,
            label: "Temperature",
            backgroundColor: "rgba(219, 0, 0, 1)",
            borderColor: "rgba(219, 0, 0, 1)",
            fill: false
        },
        {
            data:rh,
            label: "Humidity",
            fill: false
        },
        {
            data:lux,
            label: "Luminosity",
            fill:false
        }
    ]
}

我一直在使用折线图，backgroundColor 设置折线图上特定点的颜色，然后 borderColor 设置线本身的颜色以及与该数据集关联的图例标签。

Chart.js标签颜色

3 个答案: