カテゴリー: chart.js

ここで教えて頂きました。

< コード例 >

チャートは4個を同時に表示
chart.jsの描画はクラスで行ってます。
4個のチャートオブジェクトは、staticな配列に入れてます。

static charts = [null, null, null, null] 

   // 前回消去 //
    if (typeof PieChart.charts[this.idx] !== 'undefined' &&  PieChart.charts[this.idx] !== null && PieChart.charts[this.idx]) {
      PieChart.charts[this.idx].destroy();
    }


    // == ドーナツチャート描画 == //
    PieChart.charts[this.idx] = new Chart(context, {
      //type: 'doughnut',
      //type: 'pie',
      type: chartType,
      data: {
        labels: labels,
        datasets: [{
            label: name,
            backgroundColor: ["#fa8072", "#00ff7f", "#00bfff", "#a9a9a9", "#f5f5f5", "#a7d4d4", "#E5E100"],
            data: counts
          }]
      },

      // プラグインをセット //
      plugins: [
        ChartDataLabels
      ],

      //color: "#ffffff",
      options: {
        responsive: false,
        maintainAspectRatio: false, // 2回目以降大きくなってしまうのを防止用

        legend: {
          labels: {
            // グローバルプロパティを上書 ?????? no affect //
            fontColor: 'white'
          }
        },

        // データラベルがアフェクトする用 //
        /*toltip: {
         enabled: false
         },*/

        plugins: {

          // データラベルがアフェクトする用 //
          toltip: {
            enabled: false
          },

          title: {
            display: true,
            text: name
          },

          // == データラベルプラグインの設定 == //
          datalabels: {
            color: '#294829',
            font: {
              weight: 'bold',
              size: 10, // <=== 小さ目
            },
            formatter: (value, ctx) => {

              let label = ctx.chart.data.labels[ctx.dataIndex];
              //return label + '\n' + value + '%';
              return label
            }
          }
          // == データラベルプラグインの設定終わり == //

        }
      }
    })