如何为 ChartJs Legend 添加标签

Question

在ChartJs中，如何在图例上方添加text/label。我不需要图表的标签，但我需要将其放在图例上方。

我正在使用 ChartJs 生成图表。

Answer 1

您可以使用 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>

我使用了this example的代码来创建上面的例子

Answer 2

您可以覆盖默认图例选项以生成您自己的图例。但是，使用这种方法，您无法为要添加到图例顶部的标签设置样式。

P.S：我使用的是用户 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/chart.js@2.7.2/dist/Chart.bundle.min.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

Answer 3

您可以在绘制图表后使用图例上方的 fillText() 来完成此操作。

例如，使用插件 afterDatasetsDraw（或其他插件）并将标题绘制到图例第一个元素的位置（使用 legendHitBoxes[0]）。

在插件部分：

return {afterDatasetsDraw: function(chartInstance, easing) {
                        //onProgress: function (animation) {
                            //var chartInstance = this.chart;
                            var ctx = chartInstance.ctx;
                            ctx.textAlign = 'center';
                           // ctx.fillStyle = "rgba(255, 243, 243)";
                            ctx.textBaseline = 'middle';

                            // Ajout d'un titre de légende
                            var titreLegendeX = chartInstance.legend.legendHitBoxes[0].left + 50;
                            var titreLegendeY = chartInstance.legend.legendHitBoxes[0].top-20;
                            ctx.fillStyle = "#000000";
                            ctx.font = "bold 12px verdana, sans-serif";
                            ctx.fillText("Titre de légende", titreLegendeX, titreLegendeY);

Example here 适应圆环图

如何为 ChartJs Legend 添加标签

How to add label for ChartJs Legend

jquery

charts

chart.js

chartjs-2.6.0