如何将所有饼图排成一行？答案

【问题标题】：how to make all of the pie charts in a one row?如何将所有饼图排成一行？
【发布时间】：2020-08-23 19:37:12
【问题描述】：

我正在为我的网站使用 Chart.js。
我正在尝试将所有图表排成一行，但我不知道如何使用它。
我曾尝试在几个变体中使用 inline-block，但仍然没有用。
以下是图表示例。

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;
}

function createChart(data, id,i) {
  addCanvas(id); // some id generated by you or sent by the user
  generateChart(data, id,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, id,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';
}

【问题讨论】：

标签： javascript html css canvas charts

【解决方案1】：

没有 sn-p 或工作示例，但试试这个：

.chart-container {
  display: flex;
  justify-content: space-around; /* or space-between, center, depends on your needs */
}

启用display: flex 后，flex-direction: row 作为默认值，因此不需要。但如果你以后想要它作为专栏，请添加flex-direction: column。

【讨论】：