图表 js.如何更改“标签"的字体样式大批?

沃梦达教程前端问题

2022-01-01

Chart js. How to change font styles for quot;labelsquot; array?(图表 js.如何更改“标签的字体样式大批?)

本文介绍了图表 js.如何更改“标签"的字体样式大批?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

I got a chart from Chart JS library. Screenshot

var ctx = document.getElementById("myChart");
    var data = {
    labels: ["HTML", "CSS", "JavaScript", "jQuery", "Bootstrap", "Gulp", "PHP", 'SQL', 'Git'],
    datasets: [
        {
            defaultFontColor: 'red',
            backgroundColor: "rgba(0,255,255,.4)",
            borderColor: "rgba(0,255,255,.4)",
            pointBackgroundColor: "red",
            pointBorderColor: "#fff",
            lineTension: 0,
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            data: [95, 99, 60, 91, 36, 95, 40, 95, 95]
            }
        ]
    };
    var myRadarChart = new Chart(ctx, {
      type: 'radar',
      data: data,
      options: {
        responsive: true,
        scale: {
            reverse: false,
            ticks: {
                // defaultFontSize: true
            }
        }
      }
    });

I need to change font styles for underlined labels. I've dug over documentation and i tried all what i could. Even global font settings didn't change label styles, though it worked for the rest of other text. Have you met such a problem? Thanks.

解决方案

It's well hidden, but you can find this under "Point Label Options"

http://www.chartjs.org/docs/#scales-radial-linear-scale

here is a example: https://jsfiddle.net/qvrt01jp/1/

options: {
    scale: {
        pointLabels :{
           fontStyle: "bold",
        }
    }
}

global should also work if set it like this:

Chart.defaults.global.defaultFontStyle = 'italic'

这篇关于图表 js.如何更改“标签"的字体样式大批?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：图表 js.如何更改“标签"的字体样式大批?

上一篇： ChartJS 条形图，带有对应于每个条形图的图例

下一篇：在 React Js 中工作的 Chart js 中无法获得条形图颜色

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX