Question

这是我对此answered problem遇到的后续问题。我需要帮助将系列分组在一起，但各类别之间要保持一定距离。我已在图表中添加了向下钻取，向下钻取时datalabel存在问题-它们不再位于列的中心。您向上和向下钻取的次数越多，它们所获得的收益就越大。我已经知道原因与重置类别名称有关，尽管我不知道为什么或怎么做。但是在向下钻取事件中，如果您注释掉类别重置的位置，则数据标签将再次居中。

这里是fiddle，以显示我的意思-有什么建议吗？

var redrawEnabled = true;

var refChart = new Highcharts.chart('ctReferralsDetail', {
  chart: {
    backgroundColor: 'whiteSmoke',
    type: 'column',
    width: 800,
    events: {
      drilldown: function() {
        refChart.xAxis[0].setCategories(["Ballard", "Butler", "Central", "Doss", "Iroquois", "Male", "Pleasure Ridge"]);
        refChart.xAxis[0].update({
          max: categoriesAA.length - 1
        }, true);

        this.update({
          scrollbar: {
            enabled: true,
          }
        }, false);
        redraw(this);
      },
      drillupall: function() {
        this.update({
          scrollbar: {
            enabled: false
          }
        }, false);
        redraw(this);
      },
      render: function() {
        redraw(this);
      },
    }
  },
  title: {
    text: "# Referrals"
  },
  subtitle: {
    text: 'subTitle'
  },
  xAxis: {
    categories: ['Elementary 1', 'Elementary 2', 'Elementary 3', 'Middle', 'High'],
    min: 0,
    max: 4,
  },
  yAxis: [{
    title: {
      useHtml: true,
      text: '<strong># Referrals</strong>'
    }
  }],
  tooltip: {
    shared: true,
  },
  plotOptions: {
    column: {
      borderRadius: 5,
      dataLabels: {
        enabled: true,
        allowOverlap: true
      },
      grouping: false,
      pointWidth: 45
    }
  },
  series: [{
    name: "2017-18",
    data: [{
      drilldown: 'py1',
      y: 5513
    }, {
      drilldown: 'py2',
      y: 5403
    }, {
      drilldown: 'py3',
      y: 3132
    }, {
      drilldown: 'py4',
      y: 12385
    }, {
      drilldown: 'py5',
      y: 22679
    }]
  }, {
    name: "2018-19",
    data: [{
      drilldown: 'cy1',
      y: 5738
    }, {
      drilldown: 'cy2',
      y: 4397
    }, {
      drilldown: 'cy3',
      y: 3508
    }, {
      drilldown: 'cy4',
      y: 10811
    }, {
      drilldown: 'cy5',
      y: 22743
    }]
  }],
  drilldown: {
    allowPointDrilldown: false,
    series: [{
      name: "2017-18",
      id: "py1",
      data: [93, 41, 410, 84, 76, 120, 11, 525]
    }, {
      name: "2018-19",
      id: "cy1",
      data: [84, 48, 423, 78, 76, 123, 19, 502]
    }]
  }
})

function redraw(parm) {
  var series = parm.series;
  if (redrawEnabled) {
    if (parm.chartWidth > 600) {
      if (parm.options.plotOptions.column.grouping) {
        redrawEnabled = false;

        parm.update({
          plotOptions: {
            column: {
              grouping: false
            }
          }
        });

        redrawEnabled = true;
      }

      series.forEach(function(s, i) {
        s.points.forEach(function(p) {
          if (i === 0) {
            p.graphic.attr({
              translateX: 25
            });

            p.dataLabel.attr({
              translateX: p.dataLabel.translateX + 25
            });
          } else {
            p.graphic.attr({
              translateX: -25
            });

            p.dataLabel.attr({
              translateX: p.dataLabel.translateX - 25
            });
          }
        });
      });
    } else {
      if (!parm.options.plotOptions.column.grouping) {
        redrawEnabled = false;

        this.update({
          plotOptions: {
            column: {
              grouping: true
            }
          }
        });

        redrawEnabled = true;
      }
    }
  }
}

Answer 1

我认为，您不需要像以前那样使用自己的函数来定位列。最简单的解决方案是删除pointWidth，然后设置适当的pointPadding和groupPadding，以在类别之间创建更大的空间。然后，向下钻取将按预期进行。查看我在下面发布给您的演示。

代码：

var refChart = new Highcharts.chart('ctReferralsDetail', {
  chart: {
    backgroundColor: 'whiteSmoke',
    type: 'column',
    width: 800
  },
  title: {
    text: "# Referrals"
  },
  subtitle: {
    text: 'subTitle'
  },
  xAxis: {
    categories: ['Elementary 1', 'Elementary 2', 'Elementary 3', 'Middle', 'High'],
    min: 0,
    max: 4,
  },
  yAxis: [{
    title: {
      useHtml: true,
      text: '<strong># Referrals</strong>'
    }
  }],
  tooltip: {
    shared: true,
  },
  plotOptions: {
    column: {
      borderRadius: 5,
      dataLabels: {
        enabled: true,
        allowOverlap: true
      },
      groupPadding: 0.15,
      pointPadding: 0.05
    }
  },
  series: [{
    name: "2017-18",
    data: [{
      drilldown: 'py1',
      y: 5513
    }, {
      drilldown: 'py2',
      y: 5403
    }, {
      drilldown: 'py3',
      y: 3132
    }, {
      drilldown: 'py4',
      y: 12385
    }, {
      drilldown: 'py5',
      y: 22679
    }]
  }, {
    name: "2018-19",
    data: [{
      drilldown: 'cy1',
      y: 5738
    }, {
      drilldown: 'cy2',
      y: 4397
    }, {
      drilldown: 'cy3',
      y: 3508
    }, {
      drilldown: 'cy4',
      y: 10811
    }, {
      drilldown: 'cy5',
      y: 22743
    }]
  }],
  drilldown: {
    allowPointDrilldown: false,
    series: [{
      name: "2017-18",
      id: "py1",
      data: [93, 41, 410, 84, 76, 120, 11, 525]
    }, {
      name: "2018-19",
      id: "cy1",
      data: [84, 48, 423, 78, 76, 123, 19, 502]
    }]
  }
});

演示： https://jsfiddle.net/BlackLabel/7ok69jbq/1/

Highcharts数据标签在向下钻取时变得混乱

1 个答案: