Chart.js图例的左侧填充

Question

我一直在尝试使用用户Frosty Z（chart.js 2.5+）在这里找到的解决方案来为我的图例添加填充。如果图例在图表上方，该解决方案效果很好，但是当图例在左侧或右侧时，尝试在图表和图例之间添加填充变得困难。

    plugins: [{
        beforeInit: function(pdChart, options) {
            pdChart.legend.afterFit = function() {
                this.width = this.width + 50;
            };
        }
    }],

下面的图片展示了我现在的图例。我希望在图例和图表之间添加空间。

- FamousAv8er

Answer 1

您可以使用legendCallback和一些CSS生成自定义的HTML图例。

legendCallback: chart => {
  let html = '<ul>';
  chart.data.datasets.forEach((ds, i) => {
    html += '<li>' +
      '<span style="width: 36px; height: 14px; background-color:' + ds.backgroundColor + '; border:' + ds.borderWidth + 'px solid ' + ds.borderColor + '" onclick="onLegendClicked(event, \'' + i + '\')">&nbsp;</span>' +
      '<span id="legend-label-' + i + '" onclick="onLegendClicked(event, \'' + i + '\')">' +
      ds.label + '</span>' +
      '</li>';
  });
  return html + '</ul>';
}

请注意，默认图例必须通过选项legend.display：false禁用。

为了使其仍然与标准Chart.js图表的行为相同，当鼠标单击图例标签时，函数onLegendClicked被调用。此函数切换各个数据集的隐藏状态，并在常规和删除线之间更改标签文本样式。

function onLegendClicked(e, i) {
  const hidden = !chart.data.datasets[i].hidden;
  chart.data.datasets[i].hidden = hidden;
  const legendLabelSpan = document.getElementById("legend-label-" + i);
  legendLabelSpan.style.textDecoration = hidden ? 'line-through' : '';
  chart.update();
};

图例的 padding 通过以下 CSS 定义：

#legend {
  padding-left: 20px;
  padding-top: 10px;
}

请查看下面可运行的代码示例，了解它如何适用于您的特定情况。

function onLegendClicked(e, i) {
  const hidden = !chart.data.datasets[i].hidden;
  chart.data.datasets[i].hidden = hidden;
  const legendLabelSpan = document.getElementById("legend-label-" + i);
  legendLabelSpan.style.textDecoration = hidden ? 'line-through' : '';
  chart.update();
};

const chart = new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [
      {
        label: 'Dataset 1',
        data: [205, 275, 359, 329],
        borderColor: "#fd7730",
        backgroundColor: "#fd7730",
        fill: false
      },
      {
        label: 'Dataset 2',
        data: [262, 302, 290, 180],
        borderColor: "#ffd35c",
        backgroundColor: "#ffd35c",
        fill: false
      },
      {
        label: 'Dataset 3',
        data: [359, 329, 262, 302],
        borderColor: "#3fc6f3",
        backgroundColor: "#3fc6f3",
        fill: false
      },
      {
        label: 'Dataset 4',
        data: [105, 175, 259, 129],
        borderColor: "#28a745",
        backgroundColor: "#28a745",
        fill: false
      },
      {
        label: 'Dataset 5',
        data: [189, 222, 201, 158],
        borderColor: "#488cf2",
        backgroundColor: "#488cf2",
        fill: false
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    legendCallback: chart => {
      let html = '<ul>';
      chart.data.datasets.forEach((ds, i) => {
        html += '<li>' +
          '<span style="width: 36px; height: 14px; background-color:' + ds.backgroundColor + '; border:' + ds.borderWidth + 'px solid ' + ds.borderColor + '" onclick="onLegendClicked(event, \'' + i + '\')">&nbsp;</span>' +
          '<span id="legend-label-' + i + '" onclick="onLegendClicked(event, \'' + i + '\')">' +
          ds.label + '</span>' +
          '</li>';
      });
      return html + '</ul>';
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 100
        }
      }]
    }
  }
});
document.getElementById("legend").innerHTML = chart.generateLegend();

#chart-wrapper {
  display: flex;
  width: 60%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#legend {
  padding-left: 20px;
  padding-top: 10px;
}

#legend li {
  cursor: pointer;
  display: flex;
  padding: 0 10px 5px 0;
}

#legend li span {
  white-space: nowrap; 
  padding-left: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div id="chart-wrapper">  
  <canvas id="myChart" height="100"></canvas>
  <div id="legend"></div>
</div>

- uminder