Javascript 如何使图表小于其容器
我正在实施asp.net核心项目。我有一个饼图.js。我使用了outlabel插件来显示piechart每个部分的标签。现在的问题是如何使图表小于其容器，以便完全显示所有标签。现在，在运行项目之后，控制台将显示少数标签的一半。我的代码如下所示：Javascript 如何使图表小于其容器,javascript,asp.net-core,chart.js,Javascript,Asp.net Core,Chart.js,我正在实施asp.net核心项目。我有一个饼图.js。我使用了outlabel插件来显示piechart每个部分的标签。现在的问题是如何使图表小于其容器，以便完全显示所有标签。现在，在运行项目之后，控制台将显示少数标签的一半。我的代码如下所示： <div class="container"> <div class="row box2"> <div class="col-xl-9 pie" width="510" hei
<div class="container">
<div class="row box2">
<div class="col-xl-9 pie" width="510" height="410" style="position:relative; border:1px solid orange;"> @*padding:20px;*@ @*width="650" height="450"*@
<canvas class="canvaspie" id="piechart" width="510" height="410" style=" border:1px solid black;"></canvas> @*width="710" height="520"*@
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
@*outlabel plugin*@
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
$(function () {
var bgcolor= [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var commonbordercolor = [
'rgba(255,99,132,1)',
'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)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var ctx = document.getElementById("piechart").getContext('2d');
var data = {
labels: @Html.Raw(XLabels),
datasets: [{
label: "pie chart",
backgroundColor: bgcolor,
borderColor: commonbordercolor,
borderWidth: 1,
data: @Html.Raw(YValues)
}]
};
var options = {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
},
//===================================new outlabel implementation
//outlabel implementation
zoomOutPercentage: 55, // makes chart 55% smaller (50% by default, if the preoprty is undefined)
plugins: {
outlabels: {
text: '%l %p',
color: 'black',
stretch: 45,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}
//===================================
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'pie'
});
</script>
<style>
.container, .box1,box2,box3 {
/*display: block;*/
/*padding: 10px;*/
margin-bottom: 50px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1*/
text-align: justify;
}
.container{
border:1px solid red;
display: block;
}
.box2{
border:1px solid purple;
padding-top: 60px;
background-color: yellowgreen;
padding-bottom: 60px;
/*padding-right:40px;
padding-right:40px;
padding-left:40px;*/
margin-top:40px;
margin-right:40px;
display: inline-block;
/*float:left;*/
}
</style>
@*填充：20px；*@@*宽度=“650”高度=“450”*@
@*宽度=“710”高度=“520”*@
@*欧莱贝尔插件*@
$（函数（）{
变量bgcolor=[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
"rgba(255,159,64,0.2)",，
“rgba（255,0,0）”，
'rgba（0，255，0）'，
'rgba（0,0,255）'，
“rgba（192192192）”，
'rgba（255，255，0）'，
'rgba（255,0255）'
];
变量commonbordercolor=[
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
"rgba(255,159,64,1)",，
“rgba（255,0,0）”，
'rgba（0，255，0）'，
'rgba（0,0,255）'，
“rgba（192192192）”，
'rgba（255，255，0）'，
'rgba（255,0255）'
];
var ctx=document.getElementById（“piechart”）.getContext（“2d”）；
风险值数据={
标签：@Html.Raw（XLabels），
数据集：[{
标签：“饼图”，
背景颜色：bgcolor，
borderColor:commonbordercolor，
边框宽度：1，
数据：@Html.Raw（Y值）
}]
};
变量选项={
回答：错，
MaintaintAspectRatio:false，
比例：{
雅克斯：[{
滴答声：{
分:0,，
贝吉纳泽罗：是的
},
网格线：{
显示：对，
颜色：“rgba（255,99164,0.2）”
}
}],
xAxes：[{
滴答声：{
分:0,，
贝吉纳泽罗：是的
},
网格线：{
显示：假
}
}]
},
//==================================================================新的Outabel实施
//欧拉贝尔实现
zoomOutPercentage:55，//使图表缩小55%（默认情况下为50%，前提是未定义preoprity）
插件：{
不法之徒：{
文本：“%l%p”，
颜色：'黑色'，
伸展：45，
字体：{
可调整大小：正确，
minSize:12，
最大尺寸：18
}
}
}
//===================================
};
var myChart=新图表（ctx{
选项：选项，
数据：数据，
类型：'派'
});
.container、.box1、box2、box3{
/*显示：块*/
/*填充：10px*/
边距底部：50px；/*只需设置此属性即可。这将更改box1下方的空间*/
文本对齐：对齐；
}
.集装箱{
边框：1px纯红；
显示：块；
}
.box2{
边框：1px纯紫色；
填充顶部：60px；
背景颜色：黄绿色；
填充底部：60px；
/*右边填充：40px；
右边填充：40px；
左侧填充：40px*/
边缘顶端：40px；
右边距：40px；
显示：内联块；
/*浮动：左*/
}
新图表（ctx、{
...,
布局：{
填充：100
}
}
$（函数）