blocks|key|4656667|text|我不太熟悉chartJS，但我相信您可以添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4656668|Chart.defaults.global.defaultFontStyle+=+'Bold'|code-block|syntax|javascript|4656669|或|4656670|+options:+{
++++scale:+{
++++++++pointLabels+:{
+++++++++++fontStyle:+"bold",
++++++++}
++++}
}|4656671|参考文献:+1)+Chart+js.+How+to+change+font+styles+for+"labels"+array?|offset|length|4656672|希望这能有所帮助！|4656673|乔尔|4656674|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/42315589/chart-js-how-to-change-font-styles-for-labels-array^0|0|0|0|0|9|1J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@$M|15|N|16|1|17]]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

I'm not too familiar with chartJS but I do believe that you can add the following :

<pre><code>Chart.defaults.global.defaultFontStyle = 'Bold'
</code></pre>

OR

<pre><code> options: {
 scale: {
 pointLabels :{
 fontStyle: "bold",
 }
 }
}
</code></pre>

References: 
1) <a href="https://stackoverflow.com/questions/42315589/chart-js-how-to-change-font-styles-for-labels-array">Chart js. How to change font styles for &quot;labels&quot; array?</a>

Hope this helps!

Joel

blocks|key|1888694|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1888695|📷|atomic|offset|length|1888696|标签实际上是用勾号表示的，请尝试下面的解决方案。|1888697|public+barChartOptions+=+{
++++scales:+{
++++++xAxes:+[{
++++++++/*+For+changing+color+of+x-axis+coordinates+*/
++++++++ticks:+{
++++++++++fontSize:+18,
++++++++++padding:+0,
++++++++++fontColor:+'#000'
++++++++}
++++++}]
++++++}
++};++++|code-block|syntax|javascript|1888698|希望这能对你有所帮助。|1888699|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/389a0ec779ecb57b74e1046411cbe389.png|imageAlt^0|0|0|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@$E|10|F|11|1|12]]|A|$]]|$1|G|3|H|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|14|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W|X|-4]]]]

<a href="https://i.stack.imgur.com/Sxzfn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Sxzfn.png" alt="After applying this "></a> 
 The labels are actually denoted by ticks , please try below solution.

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

Hopefully this will help you.

blocks|key|6071795|text|我刚试过了。来自以下链接的任何可接受的值都应该有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6071796|https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight|offset|length|6071797|例如：|6071798|Chart.defaults.global.defaultFontStyle+=+'600';|code-block|syntax|javascript|6071799|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

I just tried this. Any acceptable values from the link below should work

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight</a>

Ex: 

<pre><code>Chart.defaults.global.defaultFontStyle = '600';
</code></pre>

blocks|key|1888432|text|如果您正在寻找具有值处理和一些符号的花哨标签，粗体标签等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1888433|+++++++++++labels:+{
++++++++++++++++++++++++render:function+(args)+{
++++++++++++++++++++++++++++if+(args.value+!=+0)
++++++++++++++++++++++++++++++++return+%2B(parseFloat(args.value).toFixed(2))+%2B+"hrs";
++++++++++++++++++++++++},
++++++++++++++++++++++++fontStyle:+"bold",
++++++++++++++++++++++++fontColor:+'black',
++++++++++++++++++++++++position+:+'outside'
++++++++++++++++++++}|code-block|syntax|javascript|1888434|我希望这能帮到你。|1888435|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you are looking for a fancy label with value processing and with some sign, bold label etc.

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

I hope this helps.

blocks|key|4656766|text|您需要直接使用UTF-8字符。我现在正在处理不同的图表，https://yaytext.com/bold-italic/上的工具对我帮助很大。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4656767|例如，下面的单词是由该工具创建的，见源代码，它们没有任何HTML格式：|4656768|你好世界！|4656769|entityMap|0|LINK|mutability|MUTABLE|url|https://yaytext.com/bold-italic/^0|S|W|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

You need to use directly the UTF-8 characters. I am working on different graphs now and the tool which is available at <a href="https://yaytext.com/bold-italic/" rel="nofollow noreferrer">https://yaytext.com/bold-italic/</a> helped me a lot.

For example, the following words were created by the tool, see the source code, they are without any HTML formatting:

Hello World!
 !
 !
 !

blocks|key|2542879|text|fontStyle值应该存在于ticks对象内部(对于react-chartjs-2)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2542880|const+options+=+{+
++scales:+{
++++xAxes:+[
++++++{
++++++++ticks:+{
++++++++++fontColor:+'#2c2c2c',+//+X-Axis+font+color
++++++++++fontStyle:+'bold',++++//+X-Axis+font+style+
++++++++},
++++++},
++++],
++}
}|code-block|syntax|javascript|2542881|entityMap^0|0|9|F|5|R|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

The <code>fontStyle</code> value should be present inside the <code>ticks</code> object (in case of <code>react-chartjs-2</code>).
<pre><code>const options = { 
 scales: {
 xAxes: [
 {
 ticks: {
 fontColor: '#2c2c2c', // X-Axis font color
 fontStyle: 'bold', // X-Axis font style 
 },
 },
 ],
 }
}
</code></pre>

blocks|key|6071747|text|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'
++++++++++++}
++++++++}
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|6071748|您可以在http://www.chartjs.org/docs/latest/general/fonts.html中找到|unstyled|offset|length|6071749|我希望它能对你有所帮助。|6071750|entityMap|0|LINK|mutability|MUTABLE|url|http://www.chartjs.org/docs/latest/general/fonts.html^0|0|4|1H|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@$G|U|H|V|1|W]]|A|$]]|$1|I|3|J|5|F|7|X|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>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'
 }
 }
 }
});
</code></pre>

You can find in <a href="http://www.chartjs.org/docs/latest/general/fonts.html" rel="nofollow noreferrer">http://www.chartjs.org/docs/latest/general/fonts.html</a>

I hope it will be help you.

I want to make a part of the labels in chartJS bold. I've been looking in the documentation but I cant find of any way. I hope there is someone who can help me out if it is possible at all. :) Below is a picture of how I want it to work. (its made in photoshop)

<img src="https://i.stack.imgur.com/sdFyi.png" alt="Horizontal bar image description">

So I want to make the "bar total", "bar 1", "bar 2", "bar 3" and "bar 4" bold so the difference with the hours is more clear.

The labels are set in my code like this:

<pre><code>labels: [["bar total", "150 hour"], ["bar 1", "70 hour"], ["bar 2", "30 hour"], ["bar 3", "40 hour"], ["bar 4", "10 hour"]],
</code></pre>

Iam using ChartJS version 2.3.0.

Any ideas?

Chart.js: Make part of labels bold

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想让标签的一部分以chartJS粗体显示。我已经在文档中找过了，但是我找不到任何方法。如果可能的话，我希望有人能帮我。:)下面是我希望它如何工作的图片。(在photoshop中制作)​​所以我想把"bar total"，"bar 1"，"bar 2"，"bar 3“和"bar 4”加粗，这样与小时的区别就更明显了。标签在我的代码中设置如下：labels: [["bar total", "150 

问Chart.js:将部分标签设置为粗体
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chart.js:将部分标签设置为粗体EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chart.js:将部分标签设置为粗体
EN