ChartJS js:将部分标签加粗

3z6pesqy  于 2023-08-05  发布在  Chart.js
关注(0)|答案(8)|浏览(224)

我想把chartJS中的一部分标签加粗。我一直在看文档,但我找不到任何方法。我希望有人能帮助我,如果可能的话。:)下面是我希望它如何工作的图片。(用Photoshop制作)


的数据
所以我想把“bar total”,“bar 1”,“bar 2”,“bar 3”和“bar 4”加粗,这样与小时的区别就更清楚了。
在我的代码中,标签是这样设置的:

labels: [["bar total", "150 hour"], ["bar 1", "70 hour"], ["bar 2", "30 hour"], ["bar 3", "40 hour"], ["bar 4", "10 hour"]],

字符串
我正在使用ChartJS版本2.3.0。
有什么想法吗

14ifxucb

14ifxucb1#

我不太熟悉chartJS,但我相信你可以添加以下内容:

Chart.defaults.global.defaultFontStyle = 'Bold'

字符串

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


参考文献:1)Chart js. How to change font styles for "labels" array?
希望这对你有帮助!
乔尔

4uqofj5v

4uqofj5v2#


的数据
标签实际上是由刻度表示的,请尝试以下解决方案。

public barChartOptions = {
    scales: {
      xAxes: [{
        /* For changing color of x-axis coordinates */
        ticks: {
          fontSize: 18,
          padding: 0,
          fontColor: '#000'
        }
      }]
      }
  };

字符串
希望这对你有帮助。

cwxwcias

cwxwcias3#

您需要直接使用UTF-8字符。我现在正在处理不同的图形,https://yaytext.com/bold-italic/上提供的工具帮了我很大的忙。
例如,下面的单词是由该工具创建的,请参阅源代码,它们没有任何HTML格式:
Hello World!𝐇𝐞𝐥𝐥𝐨𝐖𝐨𝐫𝐥𝐝我𝗛𝗲𝗹𝗹𝗼的𝗪𝗼𝗿𝗹𝗱天𝐻𝑒𝑙𝑙𝑜啊𝑊𝑜𝑟𝑙𝑑!

d7v8vwbk

d7v8vwbk4#

我刚试过这个。下面链接中的任何可接受值都应该有效
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
例如:

Chart.defaults.global.defaultFontStyle = '600';

字符串

cnjp1d6j

cnjp1d6j5#

如果您正在寻找一个花哨的标签与价值处理和一些标志,大胆的标签等

labels: {
                        render:function (args) {
                            if (args.value != 0)
                                return +(parseFloat(args.value).toFixed(2)) + "hrs";
                        },
                        fontStyle: "bold",
                        fontColor: 'black',
                        position : 'outside'
                    }

字符串
希望这能帮上忙。

vs91vp4v

vs91vp4v6#

fontStyle值应该存在于ticks对象内部(对于react-chartjs-2)。

const options = { 
  scales: {
    xAxes: [
      {
        ticks: {
          fontColor: '#2c2c2c', // X-Axis font color
          fontStyle: 'bold',    // X-Axis font style 
        },
      },
    ],
  }
}

字符串

nnt7mjpx

nnt7mjpx7#

更新截至版本:4.3.0:(示例:我想更新y轴的标签并使其加粗)

scale:{
       y:{
          ticks:{
                 font:{
                       weight: 'bold'
                 }
          }
       }
 }

字符串

4ktjp1zp

4ktjp1zp8#

Chart.defaults.global.defaultFontColor = 'red';
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            labels: {
                // This more specific font property overrides the global property
                fontColor: 'black'
            }
        }
    }
});

字符串
您可以在http://www.chartjs.org/docs/latest/general/fonts.html中找到
希望对你有所帮助。

相关问题