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 - 在水平條內寫入標籤？

回答

相關問題