Javascript Chart.js-在水平条内书写标签？

在Chart.js中，有没有办法将标签写在

“horizontalBar”

图表中的水平条内部？例如：

在Chart.js中是否可能出现类似的情况

---

谢谢

现在似乎没有直接的选择。一个可能的实现是使用onAnimationComplete钩子在条/列上迭代。您可以查看此问题以获取详细解释

我想提醒你，这有一个缺点。由于它使用onAnimationComplete，每当图表上出现动画时，值都会消失一秒钟，然后再次出现。

参考

动画的
onComplete
中的使用HTML5画布
fillText（）
方法，下面的代码将为您提供所需的信息：

自定义显示任何图表相关数据的关键是检查图表的数据集，如下面的
this.data.datasets
所示。为此，我检查了不同的值在这个数据集中的位置，以及fillText方法放置它们的位置

检查图表的数据集：

脚本（Chart.js 2.0及以上）：

var barOptions = {
      events: false,
        showTooltips: false,
      legend: {
        display: false
      },
      scales:{
        yAxes: [{
          display: false
        }]
      },
        animation: {
        onComplete: function () {
          var ctx = this.chart.ctx;
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'left';
          ctx.textBaseline = 'bottom';

          this.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
              var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                  left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
              ctx.fillStyle = '#444'; // label color
              var label = model.label;
              ctx.fillText(label, left + 15, model.y + 8);
            }
          });               
        }
        }
    };

options: {
    scales: {
        yAxes: [{ticks: {mirror: true}}]
    }
}

var气压选项={
事件：错误，
showTooltips:false，
图例：{
显示：假
},
比例：{
雅克斯：[{
显示：假
}]
},
动画：{
onComplete:函数（）{
var ctx=this.chart.ctx；
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontFamily，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='左'；
ctx.textb基线='底部'；
this.data.datasets.forEach（函数（数据集）{
对于（var i=0；i

jshiddle:
现在有一个选项“mirror”使标签显示在条内

水平条形图的“选项”配置示例：

var barOptions = {
      events: false,
        showTooltips: false,
      legend: {
        display: false
      },
      scales:{
        yAxes: [{
          display: false
        }]
      },
        animation: {
        onComplete: function () {
          var ctx = this.chart.ctx;
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'left';
          ctx.textBaseline = 'bottom';

          this.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
              var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                  left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
              ctx.fillStyle = '#444'; // label color
              var label = model.label;
              ctx.fillText(label, left + 15, model.y + 8);
            }
          });               
        }
        }
    };

options: {
    scales: {
        yAxes: [{ticks: {mirror: true}}]
    }
}

Doc:
您可以在chartjs 2.0+中通过将标签旋转90度并应用负填充来实现此效果，以便标签在“条”内向上移动。大概是这样的：

new Chart(document.getElementById(id), {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [
        {
          ticks: {
            autoSkip: false,
            maxRotation: 90,
            minRotation: 90,
            padding: -110
          }
        }
      ]
    }
  }
});

有关更多信息，请参阅。
因为“条形图”上的“镜像”选项不起作用

我找到了一个变通解决方案：

我使用了在中修改的chart.js 2.8.0版本

}))

responsiveXlabel插件用于在调整大小时转换文本。
只有一件事需要解决：对齐轴底部的文本

希望这能帮助那些希望在X轴上实现镜像并满足响应请求的人。
我花了整整一周的时间在折线图上更改标签，这看起来并不难，但很好，luckIn在ticks文档中说，这只适用于垂直刻度。你确定它可以在水平方向上工作吗？我无法向你展示我构建的仪表板，但可以，它也可以在水平条形图上工作。它只适用于yAxis，因此如果标签水平对齐，你只能在条形图内显示标签。快速测试表明它可以工作。但是，当鼠标悬停并显示toopltip时，标签会消失。有解决方法吗？添加到
悬停：{animationDuration:1}
会禁用工具提示的动画，但会解决闪烁/打开/关闭问题…谢谢。对于水平（x轴）刻度，负填充“padding:-30”足以在图表区域内向上移动它们。无需旋转（chart.js v2.9.4）。