Блог

Я использую 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, 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';
}
  

Нет фрагмента или рабочего примера, но попробуйте это:

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

При display: flex включенном он имеет flex-direction: row значение по умолчанию, поэтому он не нужен. Но если вы хотите, чтобы в будущем это было в виде столбца, добавьте flex-direction: column .