Highcharts datalabels зацикливаться на детализации

Question

Это дополнительная проблема, с которой я столкнулся на эту ответную проблему . Мне нужна была помощь в сохранении сгруппированных серий, но разнесенных между категориями. Я добавил детализацию к диаграмме, и есть проблема с метками данных при детализации - они больше не центрируются по столбцам. Чем больше вы тренируетесь, тем больше они становятся. Я выяснил причину, связанную с сбросом названий категорий, хотя я понятия не имею, почему или что с этим делать. Но в событии детализации, если вы прокомментируете, где категории сбрасываются, метки данных снова центрируются.

Вот скрипка , чтобы показать, что я имею в виду - какие-либо предложения?

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/