Блог

Я использую react-highcharts, чтобы нарисовать относительно простую столбчатую диаграмму для некоторых рабочих данных. Боссы хотели настроить его так, чтобы скрытие элемента в легенде корректировало масштаб, даже если элемент находится в середине диаграммы. Я следил за этой скрипкой с форума highcharts, чтобы мои данные исчезали и появлялись снова. Отлично, все работает! Но у меня есть ошибка, которую я не могу определить в своем коде.

Всякий раз, когда я удаляю, а затем возвращаю самый правый видимый элемент, второй справа элемент теряет свою метку данных.

Я достаточно уверен, что проблема заключается в моем объекте параметров HighCharts. Вот это ниже:

  const highChartsOptionsObject= {
chart: {
  type: "column",
  style: {
    fontFamily: "helvetica",
  },
  height: 300,
},
title: {
  text: null,
},
xAxis: {
  allowDecimals: true,
  type: "category",
  crosshair: true,
},
yAxis: {
  min: 0,
  title: {
    text: getLabel(),
  },
  labels: {
    formatter: getLabelString()
    },
  },
},
credits: {
  enabled: false,
},
legend: {
  enabled: true,
},
tooltip: {
  formatter: function () {
    return `
      <b>${this.point.name}</b><br />
      ${
        getTooltip();
      }
    `;
  },
},
plotOptions: {
  column: {
    stacking: "normal",
    pointPadding: 0.3,
    borderWidth: 0,
    dataLabels: {
      enabled: true,
      crop: false,
      overflow: "none",
      formatter: function () {
        const labelString = "hard coded test";
        return labelString;
      },
    },
  },
  series: {
    cursor: "pointer",
    events: {
      legendItemClick: function () {
        if (this.visible) {
          this.setData([], false);
        } else {
          let elementData = getSeries()[this.index].data[0];
          this.setData([{ ...elementData }], false);
        }
      },
    },
  },
},
series: getSeries(),
  

};

Для справки, моими другими параметрами highcharts являются: immutable: true и allowChartUpdate: true

Рад предоставить больше информации, если кто-то считает, что что-то еще имеет значение, мне просто нужно немного очистить это, чтобы продолжать в том же духе.

Я немного погуглил и, наконец, определил свою проблему. Во время переходов метки данных в столбцах перекрываются. Если вы не установили для allowOverlap значение true для меток данных, то по умолчанию оно будет равно false . Поскольку переход вызывает перекрытие, highcharts установит одну из меток данных невидимой / не отображаемой.

Это можно легко исправить, просто установив:

     dataLabels:{
       allowOverlap: true
        }