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

Stack Overflow用户

提问于 2021-06-20 16:36:34

回答 1查看 49关注 0票数 1

我下面有一段ChartJS 2.8代码。我想通过应用自定义字体并将x-Axis标签更改为红色来更改x-Axis的字体系列(style)。我尝试了如下，但它不起作用。有什么需要帮忙的吗？注意:请保留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>

chart.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-20 17:59:53

要实现此目的，只需将scaleLabel更改为ticks即可，而不是为scaleLabel指定fontFamily和fontColor (您需要在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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68054081

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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