chart.jsの凡例を表(テーブル)表示したいです。

[イメージ図]

やりたい事は上記の図のように、右側で表示されている凡例をテーブル表示させたいです。
色々しらべたのですが、、やり方がのっておらず
ご存じでしたら教えて頂だけると幸いです。


<script>
import { Doughnut } from 'vue-chartjs'
export default {
  extends: Doughnut,
  data(){
    return {
        chartdata: {
            labels: ['January', 'February'],
            datasets: [
                {
                label: ['Data One'],
                backgroundColor: '#f87979',
                data: [40, 30]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

少し調べてみましたが、凡例を表形式で表示するようなやり方は見つかりませんでした。
代替え案として、SVG で別途、凡例を表示するという方法は如何でしょうか？
以下はサンプルコードになります。（Vue.js の使い方に慣れていない為、書き方に誤りがありましたらすみません。）

■ サンプルコード
https://jsfiddle.net/cx20/z0rsL39p/

html
1<head>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
3<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
4<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>
5<style>
6.chart-container {
7  width:60%;
8}
9.legend-container {
10  position: absolute;
11  top: 150px;
12  left: 60%;
13  width:300px;
14}
15</style>
16</head>
17<body>
18<div class="app">
19<div class="chart-container">
20<doughnut-chart></doughnut-chart>
21</div>
22<div class="legend-container">
23<svg version="1.1" id="svg" width="100%" viewBox="0 0 200 75" xmlns="http://www.w3.org/2000/svg">
24<rect x="0"   y="0"   width="200" height="75" fill="#ffffff" fill-opacity="50%"  stroke="#a7a7a7" />
25<line x1="0"   y1="25" x2="200" y2="25" stroke="#a7a7a7"/>
26<line x1="0"   y1="50" x2="200" y2="50" stroke="#a7a7a7"/>
27<line x1="100" y1="0"  x2="100" y2="75" stroke="#a7a7a7"/>
28
29<rect x="20"  y="5"   width="50" height="15" fill="#2d52d7"/>
30<rect x="20"  y="30"  width="50" height="15" fill="#d0da00"/>
31<rect x="20"  y="55"  width="50" height="15" fill="#416752"/>
32<rect x="120" y="5"   width="50" height="15" fill="#217841"/>
33<rect x="120" y="30"  width="50" height="15" fill="#de5f6a"/>
34<rect x="120" y="55"  width="50" height="15" fill="#42a4a4"/>
35
36<text x="80"  y="20"  fill="#a7a7a7">A</text>
37<text x="80"  y="45"  fill="#a7a7a7">B</text>
38<text x="80"  y="70"  fill="#a7a7a7">C</text>
39<text x="180" y="20"  fill="#a7a7a7">D</text>
40<text x="180" y="45"  fill="#a7a7a7">E</text>
41<text x="180" y="70"  fill="#a7a7a7">F</text>
42</svg>
43</div>
44
45</div>
46<script>
47Vue.component('doughnut-chart', {
48  extends: VueChartJs.Doughnut,
49  data() {
50    return {
51      chartdata: {
52        labels: ['A', 'B', 'C', 'D', 'E', 'F', '', '', ''],
53        datasets: [{
54          label: ['Data One'],
55          backgroundColor: [
56            '#2d52d7', '#d0da00', '#416752', 
57            '#217841', '#de5f6a', '#42a4a4', 
58            '#8e2417', '#3db95b', '#62e003'],
59          data: [16, 9, 9, 8, 8, 16, 9, 9, 16]
60        }]
61      },
62      options: {
63        responsive: true,
64        cutoutPercentage: 80,
65        maintainAspectRatio: false,
66        legend: {
67          display: false
68        }
69      }
70    }
71  },
72  mounted() {
73    this.renderChart(this.chartdata, this.options)
74  }
75})
76
77var vm = new Vue({
78  el: '.app'
79})
80</script>
81</body>