javascript 如何在 pie chart.js 中创建图例位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49422790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create legend position in pie chart.js?
提问by trubex
i am using chart js for developing my pie chart. i want to create the legend position just like this. anyone please help me to solve this...
我正在使用图表 js 来开发我的饼图。我想像这样创建图例位置。任何人请帮我解决这个问题...
here is my code... i actually want the result just like the picture. and i getting error when i use css zoom:70% in html and make the javascript didn't work..
这是我的代码......我实际上想要像图片一样的结果。当我在 html 中使用 css zoom:70% 并且使 javascript 不起作用时我收到错误..
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<style type="text/css">
body{ background-color: #1f1d1d; font-family: Roboto, Myriad Pro, Segoe UI;zoom:70%;}
.col-sm-1.content { border: 2px solid #1f1d1d}
</style>
<body>
<div class="col-sm-1 content" style="background-color: #4f4f4f; height:377px;"><br><br><br>
<canvas id="myChartBBC" style="width:375px; height: 375px;"></canvas>
<br>
<p style="text-align:center; color: #fff;font-size: 14px;"><i>Browse by Channel</i></p>
</div>
</body>
<script>
var ctx = document.getElementById('myChartBBC').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'pie',
// The data for our dataset
data: {
labels: ["USSD", "URP", "MyTsel App", "Chatbot"],
datasets: [{
backgroundColor: ['rgb(12, 146, 204)',
'rgb(255, 67, 0)',
'rgb(131, 0, 255)',
'rgb(250, 255, 0)'
],
borderColor: ['rgb(12, 146, 204)',
'rgb(255, 67, 0)',
'rgb(131, 0, 255)',
'rgb(250, 255, 0)'
],
data: [73, 17, 3, 7],
}]
},
// Configuration options go here
options: {
legend:{
position: 'bottom',
labels:{
fontColor: "white"
}
}
}
});
</script>
</html>回答by Chinmoy Samanta
Try this updated code.
试试这个更新的代码。
<!doctype html>
<html>
<head>
<title>Pie Chart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body {
background-color: #1f1d1d;
font-family: Roboto, Myriad Pro, Segoe UI;
width: 800px;
height: 800px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<div id="canvas-holder" style="width:30%;background-color: #4f4f4f; height:35%;">
<canvas id="chart-area"></canvas>
<p style="text-align:center; color: #fff;font-size: 14px;"><i>Browse by Channel</i></p>
</div>
<script>
var config = {
type: 'pie',
data: {
labels: ["USSD", "URP", "MyTsel App", "Chatbot"],
datasets: [{
backgroundColor: ['rgb(12, 146, 204)',
'rgb(255, 67, 0)',
'rgb(131, 0, 255)',
'rgb(250, 255, 0)'
],
borderColor: ['rgb(12, 146, 204)',
'rgb(255, 67, 0)',
'rgb(131, 0, 255)',
'rgb(250, 255, 0)'
],
data: [73, 17, 3, 7],
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
labels: {
fontColor: "white",
boxWidth: 20,
padding: 20
}
}
}
};
window.onload = function() {
var ctx = document.getElementById('chart-area').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
</body>
</html>