web-dev-qa-db-ja.com

ChartJsLegendのラベルを追加する方法

ChartJsで、凡例の上にテキスト/ラベルを追加する方法。グラフのラベルは必要ありませんが、凡例の上に配置する必要があります。

チャートの生成に ChartJs を使用しています。

enter image description here

jquerychartschart.jschartjs-2.6.0
8
Vamsi

Htmlを使用してカスタム凡例を作成できます。これは、カスタムタイトル（およびカスタムユーザーインターフェイス）を使用してカスタム凡例を作成する方法の例です。

function legendClickCallback(event) {
  event = event || window.event;

  var target = event.target || event.srcElement;
  while (target.nodeName !== 'LI') {
      target = target.parentElement;
  }
  var parent = target.parentElement;
  var chartId = parseInt(parent.classList[0].split("-")[0], 10);
  var chart = Chart.instances[chartId];
  var index = Array.prototype.slice.call(parent.children).indexOf(target);
  var meta = chart.getDatasetMeta(index);

  if (meta.hidden === null) {
    meta.hidden = !chart.data.datasets[index].hidden;
    target.classList.add('hidden');
  } else {
    target.classList.remove('hidden');
    meta.hidden = null;
  }
  chart.update();
}

var ctx = document.getElementById("myChart");
var myLegendContainer = document.getElementById("myChartLegend");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["values #1", "values #2"],
    datasets: [
      {
        label: "One",
        backgroundColor: "red",
        data: [26,36]
      },
      {
        label: "Two",
        backgroundColor: "blue",
        data: [34, 40]
      }

    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    }
  }
});

myLegendContainer.innerHTML = myChart.generateLegend();
var legendItems = myLegendContainer.getElementsByTagName('li');
for (var i = 0; i < legendItems.length; i += 1) {
  legendItems[i].addEventListener("click", legendClickCallback, false);
}
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
[class="0-legend"] {
  cursor: pointer;
  list-style: none;
  padding-left: 0;
}
[class="0-legend"] li {
  display: inline-block;
  padding: 0 5px;
}
[class="0-legend"] li.hidden {
  text-decoration: line-through;
}
[class="0-legend"] li span {
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  margin-right: 10px;
  width: 10px;
}
.legend-box{
  border-color: gray;
  border-style: dashed;
  margin-top: 25px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>


<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
      <div class='legend-box'>
        <span>Chart legend</span>
        <div id="myChartLegend"></div>        
      </div>
    </div>
  </body>
</html>

この例 のコードを使用して上記の例を作成しました

1
pouyan

デフォルトの凡例オプションをオーバーライドして、独自の凡例を生成できます。ただし、このアプローチでは、凡例の上に追加するラベルのスタイルを設定することはできません。

追伸：ユーザーpooyanが使用したのと同じ例を使用しています。

var ctx = document.getElementById("myChart");
var myLegendContainer = document.getElementById("legends");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["values #1", "values #2"],
    datasets: [
      {
        label: "One",
        backgroundColor: "red",
        data: [26,36]
      },
      {
        label: "Two",
        backgroundColor: "blue",
        data: [34, 40]
      }

    ]
  },
  options: {
    legend: {
        position: 'left',
        labels : {
        generateLabels: function(chart){
          var data = chart.data;
          var legends = Array.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
            return {
              text: dataset.label,
              fillStyle: (!Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
              hidden: !chart.isDatasetVisible(i),
              lineCap: dataset.borderCapStyle,
              lineDash: dataset.borderDash,
              lineDashOffset: dataset.borderDashOffset,
              lineJoin: dataset.borderJoinStyle,
              lineWidth: dataset.borderWidth,
              strokeStyle: dataset.borderColor,
              pointStyle: dataset.pointStyle,

              // Below is extra data used for toggling the datasets
              datasetIndex: i
            };
          }, this) : [];
          var title = {
              text: 'My Cool Label',
              strokeStyle: 'transparent',
              fillStyle: 'transparent',
              lineWidth: 0
            };
          legends.unshift(title);
          return legends;
        }
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});
<script src="https://npmcdn.com/[email protected]/dist/Chart.bundle.min.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>
1
Dipen Shah