web-dev-qa-db-ja.com

ChartJSでカスタム凡例を作成する方法

ChartJSライブラリを使用して、ドーナツグラフのカスタム凡例を作成する必要があります。 ChartJSが提供するデフォルトの凡例を使用してドーナツを作成しましたが、変更が必要です。

車名以上の価値を持ちたい。また、粘着性のある凡例が好きではありません。ドーナツとは別にしたいので、フォント、ボックス（たとえば、「Audi」というテキストの横）のスタイルを変更できます。

Legend generator があることは知っていますが、VueJSをフレームワークとして使用しているため、VueJSでそれを使用する方法がわかりません。

これが私の伝説です。 http://imgur.com/a/NPUoi

私のコード：

From Vue component where where I importing a donut component：

<div class="col-md-6">
  <div class="chart-box">
    <p class="chart-title">Cars</p>
    <donut-message id="chart-parent"></donut-message>
  </div>
</div>

JavaScript：

    import { Doughnut } from 'vue-chartjs'
    export default Doughnut.extend({

    ready () {


    Chart.defaults.global.tooltips.enabled = false;
    Chart.defaults.global.legend.display = false;

    this.render({
      labels: ['Audi','BMW','Ford','Opel'],
      datasets: [
        {
          label: 'Cars',
          backgroundColor: ['#35d89b','#4676ea','#fba545','#e6ebfd'],
          data: [40, 30, 20, 10]
        }
      ]
    }, 
    {
      responsive: true,
      cutoutPercentage: 75,
      legend: {
        display: true,
        position: "right",
        fullWidth: true,
        labels: {
          boxWidth: 10,
          fontSize: 14
        }
      },
      animation: {
        animateScale: true
      }
    })
  }
});
javascriptvue.jschart.jsvue-chartjs
4
Denis Lapadatovic

ドキュメントを理解しようとして同じ問題があり、このリンクは凡例をカスタマイズするプロセスを明確にするかもしれません：

https://codepen.io/michiel-nuovo/pen/RRaRRv

トリックは、コールバックを追跡して独自のHTML構造を構築し、この新しい構造をChartJSに返すことです。

オプションオブジェクトの内部：

legendCallback: function(chart) {
  var text = [];
  text.Push('<ul class="' + chart.id + '-legend">');
  for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.Push('<li><span style="background-color:' + 
    chart.data.datasets[0].backgroundColor[i] + '">');
      if (chart.data.labels[i]) {
      text.Push(chart.data.labels[i]);
    }
    text.Push('</span></li>');
  }
  text.Push('</ul>');
  return text.join("");
}

次に、新しいhtmlを挿入し、メソッドmyChart.generateLegend（）を使用してカスタマイズされたhtmlを取得するためのコンテナーが必要です。

$("#your-legend-container").html(myChart.generateLegend());

その後、必要に応じて、イベントを追跡します。

$("#your-legend-container").on('click', "li", function() {
  myChart.data.datasets[0].data[$(this).index()] += 50;
  myChart.update();
  console.log('legend: ' + data.datasets[0].data[$(this).index()]);
});

$('#myChart').on('click', function(evt) {
  var activePoints = myChart.getElementsAtEvent(evt);
  var firstPoint = activePoints[0];
  if (firstPoint !== undefined) {
    console.log('canvas: ' + 
    data.datasets[firstPoint._datasetIndex].data[firstPoint._index]);
  } 
  else {
    myChart.data.labels.Push("New");
    myChart.data.datasets[0].data.Push(100);
    myChart.data.datasets[0].backgroundColor.Push("red");
    myChart.options.animation.animateRotate = false;
    myChart.options.animation.animateScale = false;
    myChart.update();
    $("#your-legend-container").html(myChart.generateLegend());
  }
}

私が見つけた別の解決策、凡例内のHTMl構造を変更する必要がない場合は、凡例コンテナーに同じHTMLを挿入し、CSSでカスタマイズすることができます。次の別のリンクを確認してください。

http://jsfiddle.net/vrwjfg9z/

それがあなたのために働くことを願っています。

4
Italo Borges

凡例マークアップを抽出できます。

data () {
  return {
     legendMarkup: ''
  }
},
ready () {
  this.legendMarkup = this._chart.generateLegend()
 }

テンプレートで出力できます。

<div class="legend" ref="legend" v-html="legendMarkup"></div>

this._chartは、vue-chartjsの内部chartjsインスタンスです。したがって、vue-chartjs apiによって公開されていないすべてのchartjsメソッドを呼び出すことができます。

ただし、凡例ジェネレーターを使用することもできます。使い方はvueと同じです。オプションを渡したり、コールバックを使用したりできます。

0
Jakub Juszczak