如何在Highcharts径向柱状图中心添加图片？解决位置偏移问题

当然可以实现这个需求。你当前代码的问题是错误处理了图表中心坐标：chart.series[0].center是一个包含中心x、y绝对坐标的数组，你直接将整个数组与plotLeft/plotTop相加，导致坐标计算错误，所以图片显示在左上角。

修正后的核心逻辑 #

function(chart) {
    // 获取图表中心的坐标数组 [x, y]
    var center = chart.series[0].center;
    // 直接使用中心坐标，无需额外叠加plotLeft/plotTop
    var imgX = center[0] - 15; // 减去图片宽度的一半，确保图片居中
    var imgY = center[1] - 15; // 减去图片高度的一半，确保图片居中

    chart.renderer.image(
        'https://www.highcharts.com/samples/graphics/sun.png',
        imgX,
        imgY,
        30,
        30
    ).add();
}

完整可运行代码 #

JavaScript

Highcharts.chart('container', {
  colors: ["#92D050", "#97BE49", "#00B0F0", "#FFC000", "#FF0000"],
  chart: {
    type: 'column',
    inverted: true,
    polar: true
  },
  title: {
    text: 'Test'
  },
  tooltip: {
    outside: true
  },
  pane: {
    size: '85%',
    innerSize: '20%',
    endAngle: 270
  },
  xAxis: {
    tickInterval: 1,
    gridLineColor: 'transparent',
    labels: {
      align: 'right',
      useHTML: true,
      allowOverlap: true,
      step: 1,
      y: 3,
      style: {
        fontSize: '13px'
      }
    },
    lineWidth: 0,
    categories: [
      "M3", "M2", "M1", "M0", "Treshold"
    ]
  },
  yAxis: {
    crosshair: {
      enabled: true,
      color: '#333'
    },
    lineWidth: 0,
    tickInterval: 0,
    reversedStacks: false,
    endOnTick: false,
    labels: {
       enabled: false
   },
    showLastLabel: true,
    gridLineColor: 'transparent',
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      borderWidth: 0,
      pointPadding: 0,
      groupPadding: 0.15
    }
  },
  series: [{
    name: 'Gold medals',
    colorByPoint: true,
    data: [148, 113, 104, 71, 77]
  }]
}, function(chart) {
    var center = chart.series[0].center;
    var imgX = center[0] - 15;
    var imgY = center[1] - 15;

    chart.renderer.image(
        'https://www.highcharts.com/samples/graphics/sun.png',
        imgX,
        imgY,
        30,
        30
    ).add();
});

CSS

#container {
  height: 600px;
}

.highcharts-figure,
.highcharts-data-table table {
  min-width: 320px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

.ld-label {
  width: 200px;
  display: inline-block;
}

.ld-url-input {
  width: 500px;
}

.ld-time-input {
  width: 40px;
}

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

关键说明 #

• chart.series[0].center返回的是图表中心相对于容器的绝对坐标数组[x, y]，无需再叠加plotLeft或plotTop。
• 减去图片宽高的一半（30px的一半是15px），是为了让图片的几何中心与图表中心完全对齐，避免图片偏移。

内容的提问来源于stack exchange，提问作者Ali