Chart.js – 造型图例
我正在用chart.js创建一个图表，我正在试图弄清楚如何更改标签/图例样式。 我想删除矩形部分，而是使用圆圈。 我已经读过你可以制作你的自定义图例（使用legendCallback），但对于我的生活，我无法弄清楚如何做到这一点。 这就是我的图表现在的样子 – 图像 。
这是我的HTML：
这是我的JS：
var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: 'Link One', data: [1, 2, 3, 2, 1, 1.5, 1], backgroundColor: [ '#D3E4F3' ], borderColor: [ '#D3E4F3', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { legend: { display: true, position: 'bottom', labels: { fontColor: '#333', } } } });
我一般都是JS的新手，所以请尽可能详细地说明你的答案。 非常感谢！
无需使用legendCallbackfunction。 您可以设置usePointStyle = true将该矩形转换为圆形。
Chart.defaults.global.legend.labels.usePointStyle = true; var ctx = document.getElementById("myChart").getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: 'Link One', data: [1, 2, 3, 2, 1, 1.5, 1], backgroundColor: [ '#D3E4F3' ], borderColor: [ '#D3E4F3', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { legend: { display: true, position: 'bottom', labels: { fontColor: '#333' } } } });
步骤1：
将选项更改为：
options: { legend: { display: false, } }
第2步：
在canvas上附加此代码（就在canvas之后）：
//Or prepend to show the legend at top, if you append then it will show to bottom.
第3步：
生成此图例而不是默认值（就在mychart之后）：
document.getElementById('chartjsLegend').innerHTML = myChart.generateLegend();
第4步：
使css生成为圆形：
.chartjsLegend li span { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 25px; }
第5步：
用你想要的东西改变css应该更好。
现在是一些chimichangas的时候了。
对于angular4-chart.js，您可以使用options属性，如下所示：
options = { legend:{ display: true, labels: { usePointStyle: true, } } }