Highcharts堆叠柱形图x轴用SVG作标签时堆叠数据不渲染求解

解决方案 #

问题原因 #

你之前的写法不符合Highcharts堆叠柱形图的数据规范：堆叠逻辑要求每一个堆叠层级对应一个独立的series，所有系列共用同一套x轴类别即可，不能将多个堆叠值塞进单个series的y字段中。

实现方法 #

你只需要把带SVG图片的x轴标签抽为独立的categories数组，再把堆叠数据拆分为对应数量的series即可，核心配置不需要大改，修改后的完整代码如下：

JS代码

var dataName = function(imgSrc) {
  return '<span><img src=' + imgSrc + ' ' + 'style="width: 40px; height: 40px;"/><br></span>';
};

// 单独定义x轴标签（带SVG图片）
var xAxisCategories = [
  dataName("https://image.flaticon.com/icons/svg/197/197571.svg"),
  dataName("https://image.flaticon.com/icons/svg/197/197408.svg"),
  dataName("https://image.flaticon.com/icons/svg/197/197375.svg"),
  dataName("https://image.flaticon.com/icons/svg/197/197374.svg"),
  dataName("https://image.flaticon.com/icons/svg/197/197484.svg")
];

// 拆分堆叠数据为两个独立系列
var stackData1 = [11, 12, 13, 41, 11];
var stackData2 = [15, 15, 15, 15, 15];

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true
      }
    }
  },
  xAxis: {
    tickmarkPlacement: 'on',
    lineWidth: 0,
    type: 'category',
    categories: xAxisCategories,
    labels: {
      useHTML: true,
      align: 'center'
    }
  },
  // 两个series对应两层堆叠
  series: [{
    name: '堆叠层1',
    data: stackData1
  }, {
    name: '堆叠层2',
    data: stackData2
  }]
});

HTML代码

和原有代码一致即可：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>

修改后既保留了x轴的SVG图片标签，也能正常实现堆叠效果，每个国家对应的柱形会按你设置的数值分层堆叠。

内容的提问来源于stack exchange，提问作者Jakob Handberg Lystbæk