積み上げ 横棒グラフメーカー HTMLとCSSをコピペできる

スポンサーリンク
スポンサーリンク

積み上げ 横棒グラフメーカー プログラム Javascipt

積み上げ 横棒グラフ %の入力

10項目まで入力できます。4つでよいときは、残り6つを0としてください。合計100としてください。

A B C D E F G H I J 

.bar-chart {
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
}

.bar {
  flex-grow: 1;
  transition: width 0.5s ease-in-out;
}
.bar-A { background-color: #FF5733; }
.bar-B { background-color: #F4D03F; }
.bar-C { background-color: #3498DB; }
.bar-D { background-color: #58D68D; }
.bar-E { background-color: #8E44AD; }
.bar-F { background-color: #1ABC9C; }
.bar-G { background-color: #E74C3C; }
.bar-H { background-color: #3498DB; }
.bar-I { background-color: #F1C40F; }
.bar-J { background-color: #7F8C8D; }

プログラムコード

HTML

<div class="bar-chart" id="barChart"><!-- 各バーはJavaScriptで追加される --></div>
<form id="inputForm">
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<th style="width: 10%;">A</th>
<th style="width: 10%;">B</th>
<th style="width: 10%;">C</th>
<th style="width: 10%;">D</th>
<th style="width: 10%;">E</th>
<th style="width: 10%;">F</th>
<th style="width: 10%;">G</th>
<th style="width: 10%;">H</th>
<th style="width: 10%;">I</th>
<th style="width: 10%;">J</th>
</tr>
<tr>
<td style="width: 10%;"><input type="number" id="percent-A" name="percent-A" min="0" max="100" value="10" /></td>
<td style="width: 10%;"><input type="number" id="percent-B" name="percent-B" min="0" max="100" value="10" /></td>
<td style="width: 10%;"><input type="number" id="percent-C" name="percent-C" min="0" max="100" value="10" /></td>
<td style="width: 10%;"><input type="number" id="percent-D" name="percent-D" min="0" max="100" value="10" /></td>
<td style="width: 10%;"><input type="number" id="percent-E" name="percent-E" min="0" max="100" value="10" /></td>
<td style="width: 10%;"><input type="number" id="percent-F" name="percent-F" min="0" max="100" value="10" /></td>
<td style="width: 10%;"><input type="number" id="percent-G" name="percent-G" min="0" max="100" value="10" /></td>
<td style="width: 10%;"><input type="number" id="percent-H" name="percent-H" min="0" max="100" value="10" /></td>
<td style="width: 10%;"><input type="number" id="percent-I" name="percent-I" min="0" max="100" value="10" /></td>
<td style="width: 10%;"><input type="number" id="percent-J" name="percent-J" min="0" max="100" value="10" /></td>
</tr>
</tbody>
</table>
<button type="submit">Update Chart</button></form>
<!-- 更新されたテキストエリア -->
<div id="codeContainer"><textarea id="htmlCode" readonly="readonly"></textarea></div>

CSS

.bar-chart {
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
}

.bar {
  flex-grow: 1;
  transition: width 0.5s ease-in-out;
}

/* クラス名と色のマッピング */
.bar-A { background-color: #FF5733; }
.bar-B { background-color: #F4D03F; }
.bar-C { background-color: #3498DB; }
.bar-D { background-color: #58D68D; }
.bar-E { background-color: #8E44AD; }
.bar-F { background-color: #1ABC9C; }
.bar-G { background-color: #E74C3C; }
.bar-H { background-color: #3498DB; }
.bar-I { background-color: #F1C40F; }
.bar-J { background-color: #7F8C8D; }


#inputForm table th:nth-child(1) { border-bottom: 10px solid #FF5733; }
#inputForm table th:nth-child(2)  { border-bottom: 10px solid #F4D03F; }
#inputForm table th:nth-child(3) {border-bottom: 10px solid #3498DB; }
#inputForm table th:nth-child(4) { border-bottom: 10px solid  #58D68D; }
#inputForm table th:nth-child(5)  {border-bottom: 10px solid #8E44AD; }
#inputForm table th:nth-child(6)  {border-bottom: 10px solid  #1ABC9C; }
#inputForm table th:nth-child(7)  {border-bottom: 10px solid  #E74C3C; }
#inputForm table th:nth-child(8)  { border-bottom: 10px solid #3498DB; }
#inputForm table th:nth-child(9)  {border-bottom: 10px solid #F1C40F; }
#inputForm table th:nth-child(10)  { border-bottom: 10px solid #7F8C8D; }

/* 追加されたCSS */
#codeContainer {
  margin-top: 20px;
}
#htmlCode {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}

Javascript

const form = document.getElementById('inputForm');
const barChart = document.getElementById('barChart');
const htmlCode = document.getElementById('htmlCode');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  // 入力されたパーセンテージを取得
  const percentA = parseInt(document.getElementById('percent-A').value);
  const percentB = parseInt(document.getElementById('percent-B').value);
  const percentC = parseInt(document.getElementById('percent-C').value);
  const percentD = parseInt(document.getElementById('percent-D').value);
  const percentE = parseInt(document.getElementById('percent-E').value);
  const percentF = parseInt(document.getElementById('percent-F').value);
  const percentG = parseInt(document.getElementById('percent-G').value);
  const percentH = parseInt(document.getElementById('percent-H').value);
  const percentI = parseInt(document.getElementById('percent-I').value);
  const percentJ = parseInt(document.getElementById('percent-J').value);

  const totalPercent = percentA + percentB + percentC + percentD + percentE + percentF + percentG + percentH + percentI + percentJ;

  if (totalPercent !== 100) {
    alert('Total percentage must be 100%. Please adjust the values.');
    return;
  }

  // バーをクリア
  barChart.innerHTML = '';

  // 各バーを生成
  createBar(barChart, percentA, 'bar-A');
  createBar(barChart, percentB, 'bar-B');
  createBar(barChart, percentC, 'bar-C');
  createBar(barChart, percentD, 'bar-D');
  createBar(barChart, percentE, 'bar-E');
  createBar(barChart, percentF, 'bar-F');
  createBar(barChart, percentG, 'bar-G');
  createBar(barChart, percentH, 'bar-H');
  createBar(barChart, percentI, 'bar-I');
  createBar(barChart, percentJ, 'bar-J');

  // HTMLコードを更新
  updateHtmlCode();
});

// 各バーを生成する関数
function createBar(container, percent, className) {
  const bar = document.createElement('div');
  bar.classList.add('bar', className);
  bar.style.width = percent + '%';
  container.appendChild(bar);
}

// HTMLコードを更新する関数
function updateHtmlCode() {
  const html = document.getElementById('barChart').innerHTML;
  htmlCode.value = html;
}
スポンサーリンク