在QGIS HTML地图提示中展示柱状图或饼状图的技术咨询

完全可以在QGIS的HTML地图提示中实现基于属性的柱状图/饼状图可视化，先解决你之前遇到的「仅标题渲染成功」的问题，再给你具体实现方案：

一、之前代码失效的核心原因 #

你之前的代码没渲染出图表，问题出在两点：

1. 缺少内联CSS样式：QGIS的HTML提示不支持外部样式表，必须把所有样式定义写在HTML内部；
2. 属性引用格式错误：你把属性变量[% "Poc_obyv_2001" %]插在了CSS变量的语法中间，导致解析失败，正确的做法是用属性值直接替换样式中的固定数值。

二、柱状图实现方案 #

1. 基础对比柱状图（基于属性百分比） #

如果你的属性是百分比数值，直接用以下代码：

<style>
.chart-container {
  width: 220px;
  margin: 10px 0;
}
.bar-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bar-label {
  width: 60px;
  text-align: right;
}
.bar {
  height: 24px;
  border-radius: 4px;
  background: #2596be;
}
.bar-value {
  margin-left: 8px;
  font-size: 12px;
}
</style>

<h3>属性对比柱状图</h3>
<div class="chart-container">
  <div class="bar-group">
    <div class="bar-item">
      <span class="bar-label">属性1:</span>
      <div class="bar" style="width: [% "Attribute 1" %]%"></div>
      <span class="bar-value">[% "Attribute 1" %]%</span>
    </div>
    <div class="bar-item">
      <span class="bar-label">属性2:</span>
      <div class="bar" style="width: [% "Attribute 2" %]%"></div>
      <span class="bar-value">[% "Attribute 2" %]%</span>
    </div>
  </div>
</div>

2. 绝对值转百分比柱状图 #

如果属性是原始数值（如人口、面积），先计算占比再渲染：

<style>
/* 同上边的CSS样式 */
</style>

<h3>属性占比柱状图</h3>
<div class="chart-container">
  <div class="bar-group">
    <div class="bar-item">
      <span class="bar-label">属性1:</span>
      <div class="bar" style="width: [% if ("Attribute 1" + "Attribute 2" > 0) then round("Attribute 1" / ("Attribute 1" + "Attribute 2") * 100) else 0 %]%"></div>
      <span class="bar-value">[% round("Attribute 1" / ("Attribute 1" + "Attribute 2") * 100) %]%</span>
    </div>
    <div class="bar-item">
      <span class="bar-label">属性2:</span>
      <div class="bar" style="width: [% if ("Attribute 1" + "Attribute 2" > 0) then round("Attribute 2" / ("Attribute 1" + "Attribute 2") * 100) else 0 %]%"></div>
      <span class="bar-value">[% round("Attribute 2" / ("Attribute 1" + "Attribute 2") * 100) %]%</span>
    </div>
  </div>
</div>

三、饼状图实现方案 #

利用CSS3的conic-gradient实现纯静态饼图，无需外部插件：

<style>
.pie-container {
  width: 180px;
  margin: 0 auto;
}
.pie-chart {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(
    #2596be 0deg [% if ("Attribute 1" + "Attribute 2" >0) then round("Attribute 1"/("Attribute 1"+"Attribute 2")*360) else 0 %]deg,
    #f59e0b [% if ("Attribute 1" + "Attribute 2" >0) then round("Attribute 1"/("Attribute 1"+"Attribute 2")*360) else 0 %]deg 360deg
  );
  position: relative;
}
.pie-legend {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}
</style>

<h3>属性占比饼状图</h3>
<div class="pie-container">
  <div class="pie-chart"></div>
  <div class="pie-legend">
    <span><span class="legend-dot" style="background:#2596be"></span>属性1: [% "Attribute 1" %]</span>
    <span><span class="legend-dot" style="background:#f59e0b"></span>属性2: [% "Attribute 2" %]</span>
  </div>
</div>

四、关键注意事项 #

• 所有样式必须写在<style>标签内，QGIS不支持外部样式文件；
• 加入if判断避免属性和为0时的除以0错误；
• 可以调整CSS中的颜色、尺寸、间距参数适配需求；
• 在QGIS图层属性的「显示→HTML地图提示」中粘贴代码后，点击「测试」按钮预览效果。

内容的提问来源于stack exchange，提问作者Jiří Komínek