如何为ChartJs Legend添加标签

Question

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

我正在使用ChartJs生成图表。

Answer 1

您可以使用html创建自定义图例。这是一个如何使用自定义标题（和自定义用户界面）创建自定义图例的示例。

public int getCurrentTab(){
        if(mViewPager != null) return mViewPager.getCurrentItem();
        else return -1;
    }

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;
}

我使用了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 适应甜甜圈图