Chart.js：使部分标签加粗答案

【问题标题】：Chart.js: Make part of labels boldChart.js：使部分标签加粗
【发布时间】：2017-09-14 14:11:44
【问题描述】：

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

所以我想将“条形总数”、“条形 1”、“条形 2”、“条形 3”和“条形 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 版。

有什么想法吗？

【问题讨论】：

Chart js. How to change font styles for "labels" array?的可能重复
不，这不一样。在您发布的链接中，问题是将所有标签加粗。在我的问题中，我问是否有办法让条形标签加粗而不是小时标签。
我也一直在寻找一个选项，即只有部分标签是粗体的，并且没有找到可以引导我们找到解决方案的文档。在我的用例中，我想在 x 轴上显示日期，例如 Friday 11/03，但 Friday 是粗体，而 11/03 不是。根据我的阅读，实现这一目标的唯一方法是手动生成标签并自己处理逻辑。还有@Deja，请仔细阅读问题和图表。 @bergJ 显然要求文字部分加粗。

标签： chart.js

【解决方案1】：

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

Chart.defaults.global.defaultFontStyle = 'Bold'

或

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

参考资料： 1)Chart js. How to change font styles for "labels" array?

希望这会有所帮助！

乔尔

【讨论】：

感谢您的输入，但这不是我想要的。我已经编辑了我的问题，以便通过我想要的示例更清楚地说明。
请注意，此设置已移至options > scales > yAxes or xAxes > scaleLabel > fontStyle

【解决方案2】：

标签实际上是用勾号表示的，请尝试以下解决方案。

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

希望这会对您有所帮助。

【讨论】：

【解决方案3】：

我刚试过这个。以下链接中的任何可接受的值都应该有效

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

例如：

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

【讨论】：

【解决方案4】：

如果您正在寻找具有价值处理和一些符号、粗体标签等的精美标签。

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

我希望这会有所帮助。

【讨论】：

【解决方案5】：

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

例如，以下文字是工具创建的，请看源码，它们没有任何HTML格式：

世界你好！ ??????????！ ??????????！ ????? ?????！

【讨论】：

【解决方案6】：

fontStyle 值应存在于ticks 对象内（如果是react-chartjs-2）。

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

【讨论】：

【解决方案7】：

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找到

希望对你有帮助。

【讨论】：

感谢您的意见，但这不是我想要的。我已经编辑了我的问题，以便通过我想要的示例更清楚地说明。