Javascript Chart.js左侧的图例填充

我一直在使用从用户FrostyZ（chart.js 2.5+）找到的解决方案，尝试将填充应用到我的图例中。如果图例位于图表上方，则解决方案非常有效，但当图例位于左右两侧时，尝试在图表和图例之间添加填充物是很困难的

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

下面的图片描述了我现在的传奇故事。我再次希望在图例和图表之间增加空间

您可以使用

legendCallback

和一些

CSS

生成一个自定义

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

图例的

填充

通过

CSS

定义如下：

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

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

仅函数已单击（e，i）{
const hidden=！chart.data.dataset[i].隐藏；
chart.data.dataset[i].hidden=hidden；
const legendLabelSpan=document.getElementById（“图例标签-”+i）；
legendLabelSpan.style.textEdition=隐藏？'line-through'：''；
chart.update（）；
};
常量图表=新图表（“myChart”{
键入：“行”，
数据：{
标签：['A'，'B'，'C'，'D']，
数据集：[
{
标签：“数据集1”，
数据：[205275359329]，
边框颜色：“fd7730”，
背景颜色：“fd7730”，
填充：假
},
{
标签：“数据集2”，
数据：[262302290180]，
边框颜色：“ffd35c”，
背景颜色：“ffd35c”，
填充：假
},
{
标签：“数据集3”，
数据：[359329262302]，
边框颜色：“3fc6f3”，
背景色：“3fc6f3”，
填充：假
},
{
标签：“数据集4”，
数据：[105175259129]，
边框颜色：“28a745”，
背景颜色：“28a745”，
填充：假
},
{
标签：“数据集5”，
数据：[189222201158]，
边框颜色：“#488cf2”，
背景色：“488cf2”，
填充：假
}
]
},
选项：{
图例：{
显示：假
},
legendCallback:chart=>{
让html=“
”；
图表.数据.数据集.forEach（（ds，i）=>{
html+='
'+
' ' +
'' +
ds.label+“”+
“
”；
});
返回html+“
”；
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
步长：100
}
}]
}
}
});
document.getElementById（“图例”）.innerHTML=chart.generateGend（）
#图表包装器{
显示器：flex；
宽度：60%；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
}
#传奇{
左侧填充：20px；
填充顶部：10px；
}
#李传奇{
光标：指针；
显示器：flex；
填充：0 10px 5px 0；
}
#李斯潘传奇{
空白：nowrap；
左侧填充：8px；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
}


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