html-query-plan 是一个不错的sql server 查询计划web 展示组件,基本可以还原sql server 查询计划的展示，如果我们需要集成web 的
sql server 性能优化，是一个不错的选择
参考使用
- 下载html-query-plan
我使用了2.6版本的，参考如下地址：
https://github.com/JustinPealing/html-query-plan/releases/download/v2.6/html-query-plan-2.6.zip - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="html-query-plan-2.6/css/qp.css" />
<script src="html-query-plan-2.6/dist/qp.js"></script>
<style>
#container {
overflow-x: auto;
auto;
height: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
fetch("/myquery.txt").then(req=>{
console.log(req)
return req.text()
}).then(result=>{
console.log(result)
QP.showPlan(document.getElementById("container"), result);
})
</script>
</body>
</html>
- 简单说明
通过fetch 获取查询计划的内容（实际使用我们可以通过类似pmm 的qan 模式，抓取慢查询的处理，然后存储db：clickhouse，mongodb，rdbms。。。）
html-query-plan对于展示使用比较简单，直接使用QP.showPlan第一个参数为dom element ，第二个为查询计划的xml content - 效果
