Question

我想在chartJS粗体中制作标签的一部分。我一直在查看文档，但我无法找到任何方式。如果可能的话，我希望有人可以帮助我。 :)下面是我希望它如何工作的图片。（它在photoshop中制作）

Horizontal bar image description

所以我想把“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。

有什么想法吗？

Answer 1

我对chartJS不太熟悉，但我相信你可以添加以下内容：

Chart.defaults.global.defaultFontStyle = 'Bold'

OR

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

参考文献： 1）Chart js. How to change font styles for "labels" array?

希望这有帮助！

乔尔

Answer 2

我刚刚尝试过。以下链接中的任何可接受的值均应正常工作

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

例如：

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

Answer 3

如果您要查找带有值处理功能且带有一些符号，粗体标签等的精美标签。

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

我希望这会有所帮助。

Answer 4

标签实际上用刻度线表示，请尝试以下解决方法。

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

希望这会对您有所帮助。

Answer 5

您需要直接使用UTF-8字符。我现在正在处理不同的图，https://yaytext.com/bold-italic/上可用的工具对我有很大帮助。

例如，以下单词是由该工具创建的，请参见源代码，它们没有任何HTML格式：

世界您好！ ?????！ ?????！

Answer 6

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][1]

中找到

[1]：http://www.chartjs.org/docs/latest/general/fonts.html。我希望它会对你有所帮助。

Chart.js：将标签的一部分加粗

6 个答案: