web-dev-qa-db-ja.com

Chart.js-水平バーの内側にラベルを書く？

Chart.jsでは、"horizontalBar"チャートの水平バーの内側にラベルを書き込む方法はありますか？次のようなもの：

this graph

Chart.jsでこれに似たものはありますか？

ありがとう！

javascriptchart.jslabels
12
antonin_scalia

ラベルをバー内に表示するオプション「ミラー」があります。

horizo​​ntalBarチャートの「オプション」設定の例：

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

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

19
Elie

データ値を表示するための元のソリューション を参照して、animationのonCompleteでHTML5 Canvas fillText()メソッドを使用すると、以下のコードで取得できます何が必要：

チャート関連データをカスタム表示するための鍵は、以下の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/

7
Hung Tran

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

詳細については tick configuration documentation をご覧ください。

2
omnikron

現時点ではこれに直接的な選択肢はないようです。可能な実装は、onAnimationCompleteフックを使用してバー/列を反復処理することです。詳細な説明については、この質問をご覧ください Chart.jsでデータ値を表示する方法

これには欠点があることを思い出してほしい。 onAnimationCompleteを使用するため、チャートでアニメーションが発生するたびに、値が1秒間消えてから再び表示されます。

0
Kubilay Karpat