我正在尝试从ChartJS生成的图例中删除笔触颜色,但我似乎无法理解the documentation告诉我的内容。
我目前的代码如下:
legend: {
position: 'bottom',
labels: {
generateLabels: function() {
return {
strokeStyle: "black",
}
}
}
}
虽然我试过这个:
generateLabels: {
strokeStyle: "black",
}
我将笔画样式设置为“黑色”以查看我是否有任何效果,但我甚至不确定这是否是我应该做的。我想我可以把它设置为无。
修改
以下是我的完整对象的代码:
var ctx = $('#chart');
var data = {
labels: ["1","2","3","4","5","6","7"],
datasets: [{
data: [22,19,17,15,10,9,8],
backgroundColor: [
'#df4344',
'#fc9627',
'#fcd949',
'#d4d81e',
'#6dc7ba',
'#24a38e',
'#263a7e',
'#5050b2',
'#4f7ec1',
'#96afe2',
],
borderColor: ["black"],
borderWidth: 2
}]
};
var wheel = new Chart(ctx, {
type: "doughnut",
data: data,
options: {
maintainAspectRatio: false,
responsive: true,
tooltips: false,
cutoutPercentage: 60,
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
但是现在我在这里运行它似乎正在工作。所以我不知道出了什么问题。
答案 0 :(得分:8)
要从图例中删除笔划,您需要为数据集设置 borderWidth
属性为 0
,例如...... < / p>
datasets: [{
borderWidth: 0,
...
}]
ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ
var ctx = c.getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Statistics',
data: [3, 1, 2, 5, 4],
backgroundColor: 'rgba(0, 119, 204, 0.1)',
borderColor: 'rgba(0, 119, 204, 0.8)',
borderWidth: 0 //<-- set this
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="c"></canvas>
答案 1 :(得分:0)
Welp,事实证明我使用的是旧版本(2.0.0?)已经保存在我的项目中,我猜不会这样做?一旦我将其指向CDN而不是我的本地副本,我所要做的就是将 borderWidth 选项更改为0.有人告诉我这是答案,但随后将其删除,所以非常感谢你!