Соединяйте только точки в пределах одной категории (Highcharts)

Question

У меня есть четыре категории данных: яблоки, бананы, апельсины, груши. Каждая категория имеет несколько точек данных. Я только хочу линию, чтобы соединить все точки данных в категории. Я не хочу линию для соединения категорий. Извините за плохой рисунок, но я хочу сохранить линии в кругах (соединить все точки данных в категории) и не показывать линии, имеющие X (линии, соединяющие категории).

function setTooltip(point) {
  let result = "";
  result += "<b>" + point.z + ": </b>" + "</br>" + point.y + "<br/>";
  return result;
}

Highcharts.setOptions({
  chart: {
    height: 500,
    type: "scatter",
    zoomType: "xy"
  },
  plotOptions: {
    scatter: {
      lineWidth: 1,
      color: "#a7a7a7",
      tooltip: {
        headerFormat: '<span style="font-size:14px">{point.key}</span><br/>'
      }
    },
    series: {
      marker: {
        fillColor: "black",
        radius: 3,
        states: {
          hover: {
            fillColor: "red"
          }
        }
      }
    }
  },
  tooltip: {
    pointFormatter: function () {
      let point = this;
      return setTooltip(point);
    }
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  xAxis: {
    type: "category"
  },
});

new Highcharts.Chart("graph1", {
  title: {
    text: "Fruit"
  },
  series: [
    {
      keys: ["name", "y", "z"],
      data: [
        ["Apples", 501.82, "pos1"],
        ["Apples", 502.61, "pos2"],
        ["Apples", 502.61, "pos3"],
        ["Apples", 502.16, "pos4"],
        ["Bananas", 495.73, "pos1"],
        ["Bananas", 493.27, "pos2"],
        ["Bananas", 493.38, "pos3"],
        ["Bananas", 494.34, "pos4"],
        ["Oranges", 497.35, "pos1"],
        ["Oranges", 497.31, "pos2"],
        ["Oranges", 498.03, "pos3"],
        ["Oranges", 496.67, "pos4"],
        ["Pears", 497.62, "pos1"],
        ["Pears", 498.46, "pos2"],
        ["Pears", 497.54, "pos3"],
        ["Pears", 497.95, "pos4"]
      ]
    }
  ]
});

https://codepen.io/austeng/pen/KKdVRqr

Важно, чтобы формат данных оставался неизменным (используйте только одну серию) и использовать ключи. Есть идеи, как это сделать? Кроме того, можно ли найти среднее количество баллов в категории? Спасибо.

Answer 1

Я думаю, что лучшее решение для достижения этой цели без изменения структуры объекта series - это вычисление позиций для использования функции zones после первоначального рендеринга с использованием обратного вызова load.

Демо: https://jsfiddle.net/BlackLabel/efwytjdn/

events: {
  load() {
    let chart = this,
      begin = 0.01,
      end = 0.99,
      zones = [];

    for (let i in chart.xAxis[0].paddedTicks) {
      if (parseFloat(i) !== chart.xAxis[0].paddedTicks.length - 1) {
        zones.push({
          value: parseFloat(i) + begin
        })
        zones.push({
          value: parseFloat(i) + end,
          color: 'transparent'
        })
      }
    }

    chart.series[0].update({
      animation: false,
      zoneAxis: 'x',
      zones: zones
    })
  }
}

API: https://api.highcharts.com/highcharts/series.line.zoneAxis

API: https://api.highcharts.com/highcharts/chart.events.load

API: https://api.highcharts.com/class-reference/Highcharts.Series#update