登录 注册

求教 QueryView 插件日记热力图

本贴最后更新于 221 天前，其中的信息可能已经斗转星移

求教，用 AI 把原帖代码修改了一半最后怎么修改都修改不对，求大佬帮忙修改下。
想实现的效果是：① 把原一年两张的热力图合并为一张，② 根据日记文档字数体现活跃度

这个是我用豆包修改了一半的代码

//!js
const query = async () => {
  // 初始化QueryView数据视图
  let dv = Query.DataView(protyle, item, top);

  // 存储处理后的笔记数据
  const data = [];
  let thisYear;
  
  // 获取文档字数的函数
  const getDocWordCount = async (blockId) => {
    try {
      // 使用思源API获取文档内容
      const resp = await fetch(`/api/block/getBlockInfo`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: blockId })
      });
      
      if (!resp.ok) {
        throw new Error(`获取文档内容失败: ${resp.status}`);
      }
      
      const blockInfo = await resp.json();
      // 计算纯文本字数（去除HTML标签）
      const textContent = blockInfo.content.replace(/<[^>]+>/g, '');
      return textContent.length;
    } catch (error) {
      console.error('获取文档字数出错:', error);
      return 0;
    }
  };
  
  try {
    // 获取根文档的子文档
    let childs = await Query.childdoc(dv.root_id);
    
    // 遍历子文档获取日期笔记
    for (let child of childs) {
      const subchilds = await Query.childdoc(child.root_id);
      
      for (let subchild of subchilds) {
        // 从文档属性中提取日期信息
        const m = subchild.ial.match(/dailynote-(\d{4})(\d{2})(\d{2})/);
        
        // 跳过格式不匹配的文档
        if (!m) continue;
        
        const [_, year, month, day] = m;
        
        // 确定当前年份
        if (!thisYear) {
          thisYear = year;
        }
        
        // 添加到数据列表
        data.push({
          id: subchild.id,
          date: `${year}-${month}-${day}`,
          title: subchild.content,
          url: `siyuan://blocks/${subchild.id}`
        });
      }
    }
    
    // 确保有数据可展示
    if (data.length === 0) {
      dv.content = '<div class="bq">未找到符合条件的日期笔记</div>';
      dv.render();
      return;
    }
    
    // 生成热力图数据（改为根据文档字数）
    const heatmapData = [];
    let maxWordCount = 0;
    
    // 先获取所有文档的字数并找出最大值
    for (const item of data) {
      const wordCount = await getDocWordCount(item.id);
      item.wordCount = wordCount;
      maxWordCount = Math.max(maxWordCount, wordCount);
    }
    
    // 生成热力图数据，根据字数计算热度值
    for (const item of data) {
      // 根据字数计算热度值，乘以系数使数值更合适
      const coefficient = 1000 / Math.max(1, maxWordCount); // 避免除以0
      const value = Math.min(item.wordCount * coefficient, 1000); // 限制最大值为1000
      heatmapData.push([item.date, value]);
    }
    
    // 计算实际数据的最大值
    const actualMax = Math.max(...heatmapData.map(item => item[1]));
    
    // ECharts配置
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          const item = data[params.dataIndex];
          return `
            <div class="font-bold">${item.date}</div>
            <div>${item.title}</div>
            <div class="text-sm text-gray-500">字数: ${item.wordCount}</div>
            <div class="text-sm text-gray-500">活跃度: ${params.value[1]}</div>
          `;
        }
      },
      visualMap: {
        min: 0,
        max: Math.max(1000, actualMax), // 确保最大值合理
        show: false,
        type: 'piecewise',
        orient: 'horizontal',
        left: 'center',
        top: 'bottom',
        pieces: [
          { min: 0, max: 200, color: '#f1eef6' },
          { min: 201, max: 400, color: '#bdc9e1' },
          { min: 401, max: 600, color: '#74a9cf' },
          { min: 601, max: 800, color: '#2b8cbe' },
          { min: 801, max: 1000, color: '#045a8d' }
        ]
      },
      calendar: [
        {
          range: [`${thisYear}-01-01`, `${thisYear}-06-30`],
          cellSize: [22, 22],
          top: 50,
          left: 'center',
          orient: 'horizontal',
          dayLabel: { nameMap: 'cn' },
          monthLabel: { nameMap: 'cn' },
          itemStyle: {
            borderRadius: 4
          }
        },
        {
          range: [`${thisYear}-07-01`, `${thisYear}-12-31`],
          cellSize: [22, 22],
          top: 320,
          left: 'center',
          orient: 'horizontal',
          dayLabel: { nameMap: 'cn' },
          monthLabel: { nameMap: 'cn' },
          itemStyle: {
            borderRadius: 4
          }
        }
      ],
      series: [
        {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: heatmapData,
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          calendarIndex: 1,
          data: heatmapData,
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    
    // 添加ECharts图表
    dv.addecharts(option, {
      height: '600px',
      events: {
        click: (params) => {
          const item = data[params.dataIndex];
          // 点击时打开对应笔记
          Query.Utils.openBlock(item.id);
        }
      }
    });
    
    // 添加标题
    dv.title = `<div class="text-center text-xl font-bold">${thisYear}年笔记日历</div>`;
    
    // 更新图例说明
    dv.content += `
      <div class="flex justify-center mt-4 gap-4">
        <div class="flex items-center"><span class="inline-block w-4 h-4 bg-[#f1eef6] mr-2 border border-gray-300"></span> 低活跃度</div>
        <div class="flex items-center"><span class="inline-block w-4 h-4 bg-[#74a9cf] mr-2 border border-gray-300"></span> 中等活跃度</div>
        <div class="flex items-center"><span class="inline-block w-4 h-4 bg-[#045a8d] mr-2 border border-gray-300"></span> 高活跃度</div>
      </div>
    `;
    
    // 渲染视图
    dv.render();
    
  } catch (error) {
    console.error('查询执行出错:', error);
    dv.content = `<div class="bq text-red-500">查询执行出错: ${error.message}</div>`;
    dv.render();
  }
}

return query();

原帖地址：QueryView 插件实现的日记热力图或索引 - 链滴

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28452 引用 • 119811 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    11158 引用 • 50674 回帖 • 50 关注
广州 位置
100 悬赏
1 收藏
5 回帖
3
2
266 110 6 35 115

相关帖子

被采纳的回答
  • Frostime •
    订阅者 付费者 支持者 捐赠者 
    //!js
const query = async () => {
  // 初始化QueryView数据视图
  let dv = Query.DataView(protyle, item, top);

  // 存储处理后的笔记数据
  const data = [];
  let thisYear;

  // 获取文档字数的函数
  const getDocWordCount = async (blockId) => {
    try {
      // 使用思源API获取文档内容
      const resp = await Query.docStat(blockId);

      return resp.stat.wordCount;
    } catch (error) {
      console.error('获取文档字数出错:', error);
      return 0;
    }
  };

  try {
    // 获取根文档的子文档
    let childs = await Query.childdoc(dv.root_id);

    // 遍历子文档获取日期笔记
    for (let child of childs) {
      const subchilds = await Query.childdoc(child.root_id);

      for (let subchild of subchilds) {
        // 从文档属性中提取日期信息
        const m = subchild.ial.match(/dailynote-(\d{4})(\d{2})(\d{2})/);

        // 跳过格式不匹配的文档
        if (!m) continue;

        const [_, year, month, day] = m;

        // 确定当前年份
        if (!thisYear) {
          thisYear = year;
        }

        // 添加到数据列表
        data.push({
          id: subchild.id,
          date: `${year}-${month}-${day}`,
          title: subchild.content,
          url: `siyuan://blocks/${subchild.id}`
        });
      }
    }

    // 确保有数据可展示
    if (data.length === 0) {
      dv.addmd('未找到符合条件的日期笔记');
      dv.render();
      return;
    }

    // 生成热力图数据（改为根据文档字数）
    const heatmapData = [];
    let maxWordCount = 0;

    // 先获取所有文档的字数并找出最大值
    for (const item of data) {
      const wordCount = await getDocWordCount(item.id);
      item.wordCount = wordCount;
      maxWordCount = Math.max(maxWordCount, wordCount);
    }

    // 生成热力图数据，根据字数计算热度值
    for (const item of data) {
      // 根据字数计算热度值，乘以系数使数值更合适
      const coefficient = 1000 / Math.max(1, maxWordCount); // 避免除以0
      const value = Math.min(item.wordCount * coefficient, 1000); // 限制最大值为1000
      heatmapData.push([item.date, value]);
    }

    const actualMax = Math.max(...heatmapData.map(item => item[1]));
5 回帖
求教 QueryView 插件日记热力图

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • Lu9693 •
    付费者 作者

    修改出来如下图。大佬可以分段把代码发上来吗？谢谢了
    image.png

  • 其他回帖
  • Frostime •
    订阅者 付费者 支持者 捐赠者 
       // ECharts配置
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          const item = data[params.dataIndex];
          return `
            <div class="font-bold">${item.date}</div>
            <div>${item.title}</div>
            <div class="text-sm text-gray-500">字数: ${item.wordCount}</div>
            <div class="text-sm text-gray-500">活跃度: ${params.value[1]}</div>
          `;
        }
      },
      visualMap: {
        min: 0,
        max: Math.max(1000, actualMax), // 确保最大值合理
        show: false,
        type: 'piecewise',
        orient: 'horizontal',
        left: 'center',
        top: 'bottom',
        pieces: [
          { min: 0, max: 200, color: '#f1eef6' },
          { min: 201, max: 400, color: '#bdc9e1' },
          { min: 401, max: 600, color: '#74a9cf' },
          { min: 601, max: 800, color: '#2b8cbe' },
          { min: 801, max: 1000, color: '#045a8d' }
        ]
      },
      calendar: [
        {
          range: [`${thisYear}-01-01`, `${thisYear}-06-30`],
          cellSize: [22, 22],
          top: 50,
          left: 'center',
          orient: 'horizontal',
          dayLabel: { nameMap: 'cn' },
          monthLabel: { nameMap: 'cn' },
          itemStyle: {
            borderRadius: 4
          }
        },
        {
          range: [`${thisYear}-07-01`, `${thisYear}-12-31`],
          cellSize: [22, 22],
          top: 320,
          left: 'center',
          orient: 'horizontal',
          dayLabel: { nameMap: 'cn' },
          monthLabel: { nameMap: 'cn' },
          itemStyle: {
            borderRadius: 4
          }
        }
      ],
      series: [
        {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: heatmapData,
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          calendarIndex: 1,
          data: heatmapData,
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    // 添加标题
    dv.addmd(`### ${thisYear}年笔记日历`);

    // 添加ECharts图表
    dv.addecharts(option, {
      height: '600px',
      events: {
        click: (params) => {
          const item = data[params.dataIndex];
          Query.Utils.openBlock(item.id);
        }
      }
    });

    // 渲染视图
    dv.render();

  } catch (error) {
    console.error('查询执行出错:', error);
    dv.content = `<div class="bq text-red-500">查询执行出错: ${error.message}</div>`;
    dv.render();
  }
}

return query();
  • Lu9693 • • 1 评论
    付费者 作者

    大佬，两张半年的热力图怎么修改合并成一张呢

    改 Echarts 的 option，这个不涉及到 QV，直接问 AI 就行。
    Frostime •
  • Frostime •
    订阅者 付费者 支持者 捐赠者
    1. data view 对象 dv 用法有问题，dv.content dv.title 这种都是他瞎编的接口，你可以尝试把说明文档发给他让他改一下
    2. getDocWordCount 函数写的有问题，用 Query.docStat API
    //!js
const query = async () => {
  // 初始化QueryView数据视图
  let dv = Query.DataView(protyle, item, top);

  // 存储处理后的笔记数据
  const data = [];
  let thisYear;

  //====== 更改 API 调用 =====
  const getDocWordCount = async (blockId) => {
    try {
      // 使用思源API获取文档内容
      const resp = await Query.docStat(blockId);

      return resp.stat.wordCount;
    } catch (error) {
      console.error('获取文档字数出错:', error);
      return 0;
    }
  };

  try {
    // 获取根文档的子文档
    let childs = await Query.childdoc(dv.root_id);

    // 遍历子文档获取日期笔记
    for (let child of childs) {
      const subchilds = await Query.childdoc(child.root_id);

      for (let subchild of subchilds) {
        // 从文档属性中提取日期信息
        const m = subchild.ial.match(/dailynote-(\d{4})(\d{2})(\d{2})/);

        // 跳过格式不匹配的文档
        if (!m) continue;

        const [_, year, month, day] = m;

        // 确定当前年份
        if (!thisYear) {
          thisYear = year;
        }

        // 添加到数据列表
        data.push({
          id: subchild.id,
          date: `${year}-${month}-${day}`,
          title: subchild.content,
          url: `siyuan://blocks/${subchild.id}`
        });
      }
    }

    // 确保有数据可展示
    if (data.length === 0) {
      dv.addmd('未找到符合条件的日期笔记');
      dv.render();
      return;
    }

    // 生成热力图数据（改为根据文档字数）
    const heatmapData = [];
    let maxWordCount = 0;

    // 先获取所有文档的字数并找出最大值
    for (const item of data) {
      const wordCount = await getDocWordCount(item.id);
      item.wordCount = wordCount;
      maxWordCount = Math.max(maxWordCount, wordCount);
    }

    // 生成热力图数据，根据字数计算热度值
    for (const item of data) {
      // 根据字数计算热度值，乘以系数使数值更合适
      const coefficient = 1000 / Math.max(1, maxWordCount); // 避免除以0
      const value = Math.min(item.wordCount * coefficient, 1000); // 限制最大值为1000
      heatmapData.push([item.date, value]);
    }

    const actualMax = Math.max(...heatmapData.map(item => item[1]));

    // ECharts配置
    const option = {
      //保持不变
    };

    //====== 不存在 dv.title, dv.content 这种 API =====
    dv.addmd(`### ${thisYear}年笔记日历`);

    // 添加ECharts图表
    dv.addecharts(option, {
      height: '600px',
      events: {
        click: (params) => {
          const item = data[params.dataIndex];
          Query.Utils.openBlock(item.id);
        }
      }
    });

    // 渲染视图
    dv.render();

  } catch (error) {
    console.error('查询执行出错:', error);
    dv.content = `<div class="bq text-red-500">查询执行出错: ${error.message}</div>`;
    dv.render();
  }
}

return query();

    回复放不了完整的代码，你把这个发给豆包让他再根据差异改成完整的代码。

    效果大概就这样：

    图片.png

    2 回复
  • 查看全部回帖
Lu9693
广州
回帖
41
 帖子
11
 积分
4769

近期热议

推荐标签 标签

  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 123 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 57 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    188 引用 • 833 回帖
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 181 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 376 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    33 引用 • 108 回帖
  • danl
    • 216 关注
  • Excel
    32 引用 • 29 回帖 • 1 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    232 引用 • 484 回帖
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 3 关注
  • 自由行
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 190 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 692 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    34 引用 • 333 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    11158 引用 • 50674 回帖 • 50 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    293 引用 • 4496 回帖 • 687 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 668 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    5 引用 • 16 回帖 • 2 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 545 关注
  • 创业

    你比 99% 的人都优秀么？

    81 引用 • 1396 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3206 引用 • 8217 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 368 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    960 引用 • 946 回帖
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 4 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    45 引用 • 44 回帖 • 2 关注
  • OnlyOffice
    4 引用 • 41 关注

最新标签