时间戳

首页 > 解决方案 > 如何更改标签的 fontFamily 并删除 chart.js 中的网格

javascript - 如何更改标签的 fontFamily 并删除 chart.js 中的网格

问题描述

我想自定义chart.js中的标签，但似乎没有找到正确的方法。我需要在哪里放置样式选项？周围有什么？有没有办法一起删除网格线？

options: {
  scale: {
    gridLines: {
      display: false
    },
    scaleLabel: { 
      fontColor: 'green',
      fontSize: '24px',
      fontFamily: "Montserrat"
    },
  ticks: {
    maxTicksLimit: 1,
    display: false,
    },
  }
},

我希望字体颜色变为绿色并变大，但它根本不会影响字体。GridLines 也是如此。我希望垂直线和水平线都会被删除，但垂直线不受影响。

在此处输入图像描述

标签： javascriptcsschart.js

解决方案

该radar图表使用线性径向轴。该文档详细说明了可用于图表轴的所有自定义项。

字体

要按照上面的方式配置字体，您需要在pointLabels属性下的选项中设置这些设置：

options: {
  scale: {
    pointLabels: {
      fontColor: 'green',
      fontSize: 24,
      fontFamily: "Montserrat"
    }
  }
}

请注意，该fontSize属性应该是一个数字，而不是一个字符串。

角线

轴线有两种不同的设置（gridLines和angleLines）。这些angleLines是从图表中心向外辐射的线条，以及您想要另外隐藏的内容。要隐藏angleLines，您需要执行以下操作：

options: {
  scale: {
    angleLines: {
      display: false
    }
  }
}

推荐阅读