javascript - Chart.js 图例填充-左

Question

我一直在使用用户 Frosty Z（chart.js 2.5+）在此处找到的解决方案，尝试将填充应用于我的图例。如果图例位于图表上方，则该解决方案效果很好，但是当图例位于左侧右侧时，尝试在图表和图例之间添加填充被证明是困难的。

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

下图描绘了我现在的传奇。我再次希望在图例和图表之间添加空间。

标签： javascriptchart.jschart.js2

Answer 1

您可以与 some 一起使用生成自定义HTML图例。legendCallbackCSS

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>