如何将标签更改为条形图中的图像(图标).js

Question

请帮帮我.如何将标签更改为条形图中的图像(图标).js？我的意思是,改变这个变化标签:"LifeWall_files/logo.png","身体功能","睡眠"

Answer 1

最简单的方法是获取包含这些图标的字体,然后设置刻度线的字体系列

  ...
  options: {
    scales: {
      xAxes: [{
        ticks: {
          fontFamily: 'FontAwesome'
        }
      }]
    }
  }
};

然后在标签中指定相应的字符代码

labels: ["\uf24e", "\uf1b9", "\uf242", "\uf0fc", "\uf236"],

使用FontAwesome CSS,上面会给你

有什么方法可以添加自定义图像而不是字体真棒表情符号？由于字体真棒图标具有std颜色高度宽度等，所以我需要将其替换为自定义.png或.jpg文件，这可能吗？ (2认同)

Answer 2

所述插件核心API提供了一系列可用于执行自定义代码钩。您可以使用afterDraw钩子直接在画布上绘制图像（图标）而不是刻度标签CanvasRenderingContext2D。

您还必须指示 Chart.js 不要显示默认刻度标签。这可以通过图表选项中的以下定义来完成。

scales: {
  xAxes: [{
    ticks: {
      display: false
    }
  }],

此外，您需要在图表底部定义一些填充，否则您只会看到部分图像。

layout: {
  padding: {
    bottom: 30
  }
},

请查看下面的可运行代码片段。

scales: {
  xAxes: [{
    ticks: {
      display: false
    }
  }],

layout: {
  padding: {
    bottom: 30
  }
},