仅连接同一类别内的点（高图表）

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