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

在Chart.js中，是否有任何方法可以在"horizontalBar"图表中的水平条内写入标签？作为类似：Chart.js - 在水平条内写入标签？

与此类似事情可能在chart.js之？

谢谢！

2016-07-28 antonin_scalia

我在折线图上改变标签整整一个星期，这看起来并不难，但祝你好运 –

现在有上选择 “镜像”，使标签出现在栏内。的 “选项” 配置用于horizontalBar图表

实施例：

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

文档：http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration

来源

2016-11-08 01:29:41 Elie

在ticks文档中它说它仅适用于垂直尺度。你确定它在水平方向上工作吗？ – paqogomez

我无法向您展示我构建的仪表板，但是，它也适用于水平条形图。 – Elie

我懂了！谢谢。 :) – paqogomez

看来现在没有直接的选择。一个可能的实现是通过使用onAnimationComplete钩子迭代条/列。你可以查看这个问题的详细解释how to display data values on Chart.js

我想提醒你，这有一个缺点。由于它使用onAnimationComplete，只要动画发生在图表上，值就会消失一秒钟，然后再次出现。

来源

2016-07-30 20:45:16

通过使用HTML5画布fillText()方法参照original solution to displaying data value的animation的onComplete，下面的代码会得到你所需要的：

的关键，自定义显示任何图表相关的数据被检查图表的数据集，如下面的this.data.datasets。我通过检查这个数据集中不同值的位置以及fillText方法的位置来做到这一点。

检查图表的数据集：Image

脚本（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/

来源

2016-08-05 17:38:00

可以通过转动标签90度，并施加负填充实现chartjs 2.0 +这种效果，以便标签在“酒吧”内上移。类似这样的：

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

查看tick configuration documentation了解更多信息。

来源

2017-10-05 14:35:54 omnikron

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

回答

相关问题