如何解决Chartjs：制作方形图例
使用 react-chartjs-2，创建条形图如下。我正在尝试将图例设为方形而不是默认矩形。
我应用 BoxWidth: 10 如下但它不起作用，是否有其他可能的替代方法来生成方形图例
const sample_data = {
labels: ['Item1','Item2'],datasets: [
{
data: [10,10,50],borderWidth: 1,backgroundColor: 'yellow',},{ data: [20,20,20],backgroundColor: 'green'
},],};
const sample_options = {
responsive: true,legend: {
BoxWidth: 10,// Also 0 doesn't make any change
},...
};
<Bar data={sample_data} options={sample_options} />;
解决方法
您必须按照文档中的说明将 boxWidth 放在图例选项的标签部分：https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
var options = {
type: 'line',data: {
labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
label: '# of Votes',data: [12,19,3,5,2,3],borderWidth: 1
},{
label: '# of Points',data: [7,11,8,7],borderWidth: 1
}
]
},options: {
legend: {
labels: {
boxWidth: 10
}
},scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。