更改Chartjs图例图标样式 [英] Change Chartjs Legend Icon Style
本文介绍了更改Chartjs图例图标样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
大家好,我正在尝试更改我的Chartjs图标图例样式(如我的屏幕截图所示),我不太确定是否有可能?
Hey guys I am trying change my Chartjs Icon legend style as shown from my screenshot, i'm not too sure if it is possible ?
<!-- https://codepen.io/IrvingLee/pen/boqrEQ -->
推荐答案
是!
第一
设置 usePointStyle
属性设置为 true
用于图例选项中的图例的标签,例如:
set the usePointStyle
property to true
for legend's labels, in your chart options, like so :
options: {
legend: {
labels: {
usePointStyle: true
}
},
...
第二次 >
设置每个数据集的 pointStyle
属性(根据您的要求):
datasets: [{
...
pointStyle: 'line'
}, {
...
pointStyle: 'rect'
}]
strongɪɴɢᴇxᴀᴍᴘʟᴇstrong
var data = {
labels: ['Value [mm]', ''],
datasets: [{
label: "Hi-Hi Limit",
type: 'line',
data: [5432, 5432],
backgroundColor: 'rgba(250, 255, 255, 0)',
borderColor: 'rgba(255, 4, 0, 100)',
borderWidth: 3,
radius: 0,
pointStyle: 'line'
}, {
label: "Hi Limit",
type: 'line',
data: [5130, 5130],
backgroundColor: 'rgba(250, 255, 255, 0)',
borderColor: 'rgba(250, 255, 0, 100)',
borderWidth: 3,
radius: 0,
pointStyle: 'line'
}, {
label: "Lo Limit",
type: 'line',
data: [905, 905],
backgroundColor: 'rgba(250, 255, 255, 0)',
borderColor: 'rgba(250, 255, 0, 100)',
borderWidth: 3,
radius: 0,
pointStyle: 'line'
}, {
label: "Lo-Lo Limit",
type: 'line',
data: [604, 604],
backgroundColor: 'rgba(250, 255, 255, 0)',
borderColor: 'rgba(255, 4, 0, 100)',
borderWidth: 3,
radius: 0,
pointStyle: 'line'
}, {
type: 'line',
label: "Level",
data: [4800, 4800],
backgroundColor: 'rgba(0, 119, 220, 1)',
borderColor: 'rgba(0, 119, 220, 1)',
borderWidth: 1,
radius: 0,
pointStyle: 'rect'
}],
};
var options = {
legend: {
position: 'right',
labels: {
usePointStyle: true
}
},
scales: {
yAxes: [{
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
};
Chart.Bar('chart', {
options: options,
data: data
});
body {
background: #1D1F20;
padding: 16px;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
这篇关于更改Chartjs图例图标样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文