如何解决如何将所有饼形图排成一排?
我正在为我的网站使用Chart.js。
我试图将所有图表排成一排,但我不知道该怎么做。
我曾尝试在几个变体中使用内联块,但仍然没用。
这是图表的示例。
html,CSS和js代码如下:
html
<div class="chart-container">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</div>
CSS
.chart-container{
display:inline-block;
width: auto;
height: auto;
}
.myCanvas{
display: inline-block;
width: auto;
height: auto;
}
js
function createChart(data,id,i) {
addCanvas(id); // some id generated by you or sent by the user
generateChart(data,i); // data from the user
}
function addCanvas(id) { // create the new canvas
let canvas = document.createElement('canvas');
canvas.id=id;
canvas.classList.add('myCanvas');
canvas.style = "width:20px; height:20px;";
document.body.appendChild(canvas); // adds the canvas to the body element
document.getElementsByClassName('chart-container')[0].appendChild(canvas);
}
function generateChart(data,i) { // initialize the new chart
let piechart = $("#" + id);
let data1 = {
labels: namesArr,datasets: [
{
label: "Population (millions)",backgroundColor:
["#3e95cd","#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3cba9f"],data: data
}
]
};
let chart = new Chart(piechart,{
type:"pie",data : data1,options: {
title: {
display: true,text: itemsArr[i]
}
}
});
chart.canvas.parentNode.style.height = '200px';
chart.canvas.parentNode.style.width = '200px';
}
解决方法
没有摘要或有效示例,但请尝试以下操作:
.chart-container {
display: flex;
justify-content: space-around; /* or space-between,center,depends on your needs */
}
启用display: flex
时,它的默认值是flex-direction: row
,因此不需要。但是,如果您希望将来将其用作列,请添加flex-direction: column
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。