仅连接同一类别中的点（Highcharts）答案

【问题标题】：Only connect points within the same category (Highcharts)仅连接同一类别中的点（Highcharts）
【发布时间】：2020-04-16 17:57:18
【问题描述】：

我有四类数据：Apples、Bananas、Oranges、Pears。每个类别都有多个数据点。我只想要一条线来连接一个类别中的所有数据点。我不想要一条线来连接类别。抱歉画的不好，但我想保持圆圈中的线条（连接一个类别中的所有数据点）而不显示带有 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

保持数据格式相同（仅使用一个系列）并使用键是很重要的。关于如何做到这一点的任何想法？另外，是否有可能找到一个类别中点的平均值？谢谢。

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

我认为在不更改series 对象结构的情况下实现它的最佳解决方案是通过使用load 回调在初始渲染后计算使用zones 功能的位置。

演示：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

【讨论】：