web-dev-qa-db-ja.com

Chart.js-凡例とグラフの間隔を広げる

3本の垂直線を描画した棒グラフがあり、各線には上部に独自のラベルがあります。これらのラベルをy軸の上部（例では30％の線より上）で、凡例の下に配置したいと思います。縦線のラベル（15、24、33）をチャート自体から外し、凡例の下に配置できるように、上部の凡例とチャートの間の間隔を広げる方法がわかりません。何か案は？

Example Chart

chart.jschart.js2
20
Bryan Lewis

残念ながら、これを処理するための設定オプションはないため、Chart.Legendを拡張してafterFit()コールバックを実装することで目的の結果を得ることができます。

ここに簡単な codepen があります。間隔を変更するには、9行目の値を変更するだけです（現在は50に設定されています）。また、これはもちろん上部の凡例でのみ機能します。うまくいけば、この例は、凡例を他の場所に移動したい場合に修正できるほど明確であることが望ましい。

14
jordanwillis

すべてのチャートで間隔を増やしたい場合は、作成する前にこのコードを配置できます。

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

もちろん、私は試していませんが、変更することができると思います（または元のChartオブジェクトをコピーして、元のパディングを維持します）。

さようなら

16
Dorian Maliszewski

凡例の下にパディングを適用する場合一部のチャートのみアプリで：

ChartJS> = 2.1.

Chart.plugins.register({
  id: 'paddingBelowLegends',
  beforeInit: function(chart, options) {
    chart.legend.afterFit = function() {
      this.height = this.height + 50;
    };
  }
});

// ----------------------------------
// disable the plugin only for charts
// where you DO NOT WANT the padding
// ----------------------------------

// for raw ChartJS use:
var chart = new Chart(ctx, {
  config: {
    plugins: {
      paddingBelowLegends: false
    }
  }
});

// for angular-chartjs:
$scope.myChart.options.plugins = { paddingBelowLegends: false }
// then in template:
// <canvas class="chart ..." chart-options="myChart.options" ... />

ChartJS> = 2.5.

各グラフの特定のプラグインがサポートされており、次のことが可能です。

var chart = new Chart(ctx, {
  plugins: [{
    beforeInit: function(chart, options) {
      chart.legend.afterFit = function() {
        this.height = this.height + 50;
      };
    }
  }]
});

ChartJSドキュメント + この他の回答 に触発されたを参照してください

7
Frosty Z

これは2日間の研究の後、私を助けました。

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

module.tsファイルでこれを更新します

0
sahil ralkar

私はreact-chartjs-2を使用していますが（これは単なるポートであり、同じ構成オブジェクトを使用します）、凡例構成にネストされたラベル構成を変更することでそれを達成できました：

chartOptions = {
  legend: {
    labels: {
      padding: 50 -> this one.
    }
  },

ここでプロパティの説明を確認できます： https://www.chartjs.org/docs/latest/configuration/legend.html

それが役に立てば幸い。

0
Itsca