如何在Chart.js中删除图例文本旁边的矩形框 [英] How to remove rectangle box next to the legend text in Chart.js
问题描述
在这种情况下，我试图删除传奇"文本得分列表"左侧的小矩形框.我在文档中找不到任何显示该操作方法的信息.是的，我发现了如何完全删除图例"，但这会导致条形图在图表设计中变得过高.这是我的示例代码:
I am trying to remove the small rectangle box on the left of the "legend" text "Score List" in this case, of the chart. I can not find anything in the docs that shows how to do that. Yes, I found how to remove the "legend" entirely, but that would causes the graphs of the bars to go too high in my chart design. Here is a sample code I have:
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - BarGraph</title>
<style type="text/css">
#chart-container {
width: 300px;
height: 150px;
}
</style>
<!-- javascript -->
<script type="text/javascript" src="jquery-1.11.min.js"></script>
<script type="text/javascript" src="Chart.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
//url: "test.html",
//method: "GET",
success: function(data) {
// test data
var data = [
{
"Serverid":"1",
"score":"37"
},
{
"Serverid":"2",
"score":"60"
},
{
"Serverid":"3",
"score":"35"
},
{
"Serverid":"4",
"score":"41"
},
{
"Serverid":"5",
"score":"50"
},
{
"Serverid":"6",
"score":"70"
},
{
"Serverid":"7",
"score":"70"
},
{
"Serverid":"8",
"score":"70"
},
// ... it can be more than that
];
var Server = [];
var score = [];
for(var i in data) {
Server.push("Server " + data[i].Serverid);
score.push(data[i].score);
}
var chartdata = {
labels: Server,
datasets : [
{
label: 'Score List',
backgroundColor: [
// even color
'rgba(255, 99, 132, 0.2)',
// odd color
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
// even color
'rgba(255,99,132,1)',
// odd color
'rgba(153, 102, 255, 1)'
],
borderWidth: 1,
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: score
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var ttip_value = data.datasets[0].data[tooltipItem.index];
if(ttip_value == 31) {
return "DOWN";
}else {
return "UP";
}
}
}
}
}
});
}, // end success
error: function(data) {
console.log(data);
alert(data);
}
}); // end ajax
});
</script>
</head>
<body>
<br> Bar Chart <br>
<div id="chart-container">
<canvas id="mycanvas" width="200" height="100"></canvas>
</div>
</body>
</html>
谢谢！
推荐答案
删除图例彩色框的最简单方法是使用legend.labels.boxSize属性并将其设置为0(在chart.js API中有记录此处).这是一个 codepen 示例.
The easiest way to remove the legend colored boxes is to use the legend.labels.boxSize property and set it to 0 (this is documented in the chart.js API here). Here is a codepen example.
legend: {
labels: {
boxWidth: 0,
}
}
请记住，用于配置嵌入式图例的选项不是很多(因为它实际上是直接在canvas对象中呈现的).如果您以后决定要以更有意义的方式更改图例的外观，则最简单的方法是使用普通的HTMl/CSS创建自己的图例并对其进行相应样式设置.您可以使用.generateLegend()原型方法来实现.
Keep in mind that there are not very many options for configuring the embedded legend (since it is actually rendered directly in the canvas object). If you later decide you would like to change the legend look and feel in a more significant way then it is easiest to create your own legend using normal HTMl/CSS and style it accordingly. You can achieve this by using the .generateLegend() prototype method.
这是使用自定义外部图例的图表的示例.
Here is an example of a chart that is using a custom external legend.
这篇关于如何在Chart.js中删除图例文本旁边的矩形框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
