有见过这种图表吗，竖轴0-30号每天值，横轴1月1日-12月31日每天值，这种图表我用什么插件做？技术栈：html,javascript,css

各们老师，有见过这种图表吗，竖轴0-30号每天值，横轴1月1日-12月31日每天值，这种图表我用什么插件做？

汝何不上九霄

4.6k51744

发布于
6 月 7 日北京

更新于
6 月 7 日

✓ 已被采纳

你可以使用echarts 的日历坐标系实现你这个功能

https://echarts.apache.org/examples/zh/index.html#chart-type-...

https://echarts.apache.org/examples/zh/editor.html?c=calendar...

Chr_Isme

121

发布于
6 月 17 日上海

这就是一个设置了一些背景色的普通表格，自己手写就好了，不需要第三方组件。

豫则立

29112073

发布于
6 月 18 日湖南

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图表</title>
  <style>
    #chart {
      width: 900px;
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      font-size: 12px;
    }

    /*---y轴 小时---*/

    /* 小时 */
    #chart .y-axis {
      width: 30px;
      height: 168px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    #chart .y-axis div {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: calc(100% - 30px);
    }

    #chart .y-axis span {
      height: 15px;
      text-align: center;
    }

    /*---右侧内容---*/

    #chart .container {
      width: 870px;
      overflow-x: auto;
      overflow-y: hidden;
    }

    #chart .container .datas {
      width: 2555px;
      display: flex;
      justify-content: flex-start;
    }

    #chart .container .datas div {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    #chart .container .datas div span {
      width: 5px;
      height: 5px;
      border: .25px solid rgba(255, 255, 255);
    }

    /* x轴 所有月份 */
    #chart .container .x-axis {
      width: 2555px;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-around;
    }

    /*---颜色档位---*/
    .color-level {
      font-size: 12px;
      width: 900px;
      display: flex;
      justify-content: flex-end;
      margin: 10px 0 0;
    }

    .color-level .colors {
      display: flex;
      margin: 0 5px;
    }

    .color-level .colors span {
      font-size: 9px;
      width: 15px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      border: .5px solid white;
    }
  </style>
</head>

<body>
  <h1>图形</h1>
  <div id="chart">
    <div class="y-axis"></div>
    <div class="container">
      <div class="datas"></div>
      <div class="x-axis"></div>
    </div>
  </div>
  <!-- 颜色档位 -->
  <div class="color-level">
    <span>更少的</span>
    <div class="colors"></div>
    <span>更多的</span>
  </div>

  <script>
    // 所有颜色值，11个
    const colors = [
      "rgba(240, 240, 240, 1)",
      "rgba(237, 255, 255, 1)",
      "rgba(217, 255, 255, 1)",
      "rgba(197, 239, 255, 1)",
      "rgba(177, 219, 255, 1)",
      "rgba(157, 199, 239, 1)",
      "rgba(137, 179, 219, 1)",
      "rgba(117, 159, 199, 1)",
      "rgba(97, 139, 179, 1)",
      "rgba(77, 119, 159, 1)",
      "rgba(37, 79, 119, 1)"
    ]

    // 生成颜色块的spans
    const colorsDiv = document.querySelector('.colors');
    let spans = "";
    for (let i = 0; i < colors.length; i++) {
      spans += `<span style="background-color: ${colors[i]}">${i / 10}</span>`
    }
    colorsDiv.innerHTML = spans;


    // 生成一天的小时，图表y轴坐标值
    const YAxisVal = document.querySelector('.y-axis');
    let hourSpans = `<span class="top">23</span><div><span>20</span><span>16</span><span>12</span><span>8</span><span>4</span></div><span class="bottom">0</span>`;
    // for (let i = 23; i >= 0; i--) {
    //   hourSpans += `<span>${i}</span>`
    // }
    YAxisVal.innerHTML = hourSpans;

    // 生成一年的月份，图表x轴坐标值
    let XAxisVal = document.querySelector('.x-axis');
    let monthSpans = "";
    for (let i = 0; i < 12; i++) {
      monthSpans += `<span>${i + 1}月</span>`
    }
    XAxisVal.innerHTML = monthSpans;


    /**
     * 生成一年的小时数据
    */
    function getYearHours() {
      let data = [];
      for (let i = 0; i < 8760; i++) {
        data.push(Math.random().toFixed(1))
      }
      return data;
    }

    // 全年的小时数
    const yearHours = getYearHours()

    console.log(yearHours);

    // 循环全年的小时数据增加span标签
    let yearHourDivs = ""
    let dayDiv = ""
    for (let i = 0; i < yearHours.length; i++) {
      if (i % 24 == 0) {
        // 一天的第1个值，放在字符的最前面
        dayDiv = `<span data-val='${yearHours[i]}' style="background-color: ${colors[parseInt(yearHours[i] * 10)]}"></span></div>`
      } else if (i % 24 == 23) {
        // 一天的最后1个值，放在字符的最前面
        dayDiv = dayDiv.replace(/^/, `<div><span data-val='${yearHours[i]}' style="background-color: ${colors[parseInt(yearHours[i] * 10)]}"></span>`);
        yearHourDivs += dayDiv
      } else {
        // 1天的中间值，放在字符的最前面
        dayDiv = dayDiv.replace(/^/, `<span data-val='${yearHours[i]}' style="background-color: ${colors[parseInt(yearHours[i] * 10)]}"></span>`);
      }
    }

    // console.log(yearHourDivs);

    // 给 datas div赋值
    const hoursAllData = document.querySelector('.datas');
    hoursAllData.innerHTML = yearHourDivs



  </script>
</body>

</html>

我养了一窝汪汪

9741517

发布于
6 月 7 日湖南

应该可以用echarts做出来，你可以去看一下他们的示例https://echarts.apache.org/examples/zh/index.html#chart-type-graphic，能找到跟你描述相关的，更改一下就可以达到你要的效果

各们老师，有见过这种图表吗，竖轴0-30号每天值，横轴1月1日-12月31日每天值，这种图表我用什么插件做？

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？