Question

我在下面有一个 ChartJS 2.8 代码。我想通过应用自定义字体并将 x 轴标签更改为红色来更改 x 轴的字体系列（样式）。我尝试如下，但它不起作用。请问有什么帮助吗？注意：请保留库 2.8.0，不要更改它。谢谢。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="shortcut icon" href="favicon.ico">
        <title></title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
        <link href="https://fonts.cdnfonts.com/css/benchnine" rel="stylesheet">
        <style>
            @import url('https://fonts.cdnfonts.com/css/benchnine');
        </style>
    </head>
    <body>
        <h1 style='font-family:"BenchNine";'>BenchNine 222 444</h1>
        <div class="reportGraph" style="width:860px;margin:auto;">
            <canvas id="chartJSContainer" height="250"></canvas>
        </div>
        <script>
            var options = {
                type: "bar",
                data: {
                    datasets: [
                        {
                            label: "20. June. 2021 01:08",
                            data: [98,92,94,98,100,96,28,-18,96,70],
                            borderColor: "black",
                            backgroundColor: "transparent",
                            type: "line",
                            borderWidth: 1,
                            lineTension: 0,
                            fill: false
                        }                    
                    ]
                },
                options: {
                    scales: {
                        yAxes: [{
                          ticks: {
                            min: -100,
                            max: 100
                          }
                        }],
                        xAxes: [{
                            labels: ["111", "222", "333", "444", "555", "666", "777", "888", "999", "000"],
                            scaleLabel: {
                                fontFamily: "BenchNine",
                                fontColor: "red"
                            }
                        }
                        ]
                    },
                    responsive: true
                }
            };
            var chart = new Chart(document.getElementById("chartJSContainer"), options);
        </script>
    </body>
</html>

Answer 1

不是为 fontFamily 指定 fontColor 和 scaleLabel，ticks 是您需要在 scaleLabel 部分指定的比例标题，要实现这一点，只需更改 { {1}} 到 ticks

现场示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="shortcut icon" href="favicon.ico">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
  <link href="https://fonts.cdnfonts.com/css/benchnine" rel="stylesheet">
  <style>
    @import url('https://fonts.cdnfonts.com/css/benchnine');
  </style>
</head>

<body>
  <h1 style='font-family:"BenchNine";'>BenchNine 222 444</h1>
  <div class="reportGraph" style="width:860px;margin:auto;">
    <canvas id="chartJSContainer" height="250"></canvas>
  </div>
  <script>
    var options = {
      type: "bar",
      data: {
        datasets: [{
          label: "20. June. 2021 01:08",
          data: [98, 92, 94, 98, 100, 96, 28, -18, 96, 70],
          borderColor: "black",
          backgroundColor: "transparent",
          type: "line",
          borderWidth: 1,
          lineTension: 0,
          fill: false
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              min: -100,
              max: 100
            }
          }],
          xAxes: [{
            labels: ["111", "222", "333", "444", "555", "666", "777", "888", "999", "000"],
            ticks: {
              fontFamily: "BenchNine",
              fontColor: "red"
            }
          }]
        },
        responsive: true
      }
    };
    var chart = new Chart(document.getElementById("chartJSContainer"), options);
  </script>
</body>

</html>

ChatJS 2.8 更改 x 轴字体样式和颜色

1 个答案: