Как сделать матричный граф с библиотекой javascript?

Question

Мне нужно сделать матричный граф с библиотекой javascript (вы можете порекомендовать немного), я думал о том, чтобы сделать это с chart.js, но мне нужно, чтобы он выглядел примерно так, как показано на следующем рисунке:

данные будут извлечены из MySQL с php .... просто хотите идеи или предложения о том, как это сделать, пожалуйста, мне нужна помощь: (

Answer 1

Нечто подобное будет работать.Вы просто должны установить CSS-свойство background-color для каждого '`в каждой ячейке.(и, конечно, добавьте метки).

.top-label {
  transform: rotate(-90deg)
}

tr {
  height: 30px;
}

td {
  width: 30px;
}

div {
  width: 30px;
  height: 30px;
  border-radius: 1000px;
  background-color: green;
}

<table border="1">
  <tr>
    <th></th>
    <th class="top-label">
      Vert
    </th>
    <th class="top-label">
      Vert
    </th>
    <th class="top-label">
      Vert
    </th>
    <th class="top-label">
      Vert
    </th>
    <th class="top-label">
      Vert
    </th>
    <th class="top-label">
      Vert
    </th>
    <th class="top-label">
      Vert
    </th>
    <th class="top-label">
      Vert
    </th>
  </tr>

  <tr>
    <td>label</td>
    <td>
      <div> </div>
    </td>
    <td>
      <div> </div>
    </td>
    <td>
      <div> </div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
  <tr>
    <td>label</td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
  <tr>
    <td>label</td>

    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
  <tr>
    <td>label</td>

    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
  <tr>
    <td>label</td>

    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
  <tr>
    <td>label</td>

    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
  <tr>
    <td>label</td>

    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
  <tr>
    <td>label</td>

    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
  <tr>
    <td>label</td>

    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>

</table>