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

Question

在图表中。js，有没有办法在“horizontalBar”图表中的水平条内写入标签？例如：

在图表中是否有类似的情况。js？

谢谢

Answer 1

在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
          }
        }
      ]
    }
  }
});

有关更多信息，请参阅勾选配置文档。

Answer 2

关于在动画的onComplete中使用HTML5 CanvasfillText（）方法显示数据值的原始解决方案，下面的代码将为您提供所需的：

自定义显示任何图表相关数据的关键是检查图表的数据集，如所示。数据下面的数据集。为此，我检查了不同的值在这个数据集中的位置，以及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);
            }
          });               
        }
        }
    };

jsFiddle：http://jsfiddle.net/jfvy12h9/

Answer 3

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

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

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

文件：http://www.chartjs.org/docs/latest/axes/cartesian/#common-配置