如何通过highcharts中的原点制作回归线

Question

我试图让回归从原点 x=y=0 开始。这有可能做到吗。有人说这样做不好，但出于某些目的，我需要让这条线穿过原点。我正在使用 highcharts。

Answer 1

如何在 x = y = 0 的回归序列中添加一个点并将标记设置为禁用以隐藏它？

let discipline = [
  {
    name: "Football",
    data: "football"
  }
];

Highcharts.getJSON(
  "https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/olympic2012.json?callback=?",
  function (data) {
    
    function regression(arrWeight, arrHeight) {
      let r, sy, sx, b, a, meanX, meanY;
      r = jStat.corrcoeff(arrHeight, arrWeight);
      sy = jStat.stdev(arrWeight);
      sx = jStat.stdev(arrHeight);
      meanY = jStat(arrWeight).mean();
      meanX = jStat(arrHeight).mean();
      b = r * (sy / sx);
      a = meanY - meanX * b;
      //Set up a line
      let y1, y2, x1, x2;
      x1 = jStat.min(arrHeight);
      x2 = jStat.max(arrHeight);
      y1 = a + b * x1;
      y2 = a + b * x2;
      return {
        line: [
            //Add x = 0, y = 0 to your regression logic?
            {x: 0, y: 0, marker: {enabled: false}},
          {x: x1, y: y1, marker: {enabled: true}},
          {x: x2, y: y2, marker: {enabled: true}},
        ],
        r
      };
    }
    
    const getData = (continentName) => {
      let temp = [],
        tempWeight = [],
        tempHeight = [];
      data.forEach((elm) => {
        if (
          elm.continent == continentName &&
          elm.weight > 0 &&
          elm.height > 0
        ) {
          temp.push([elm.height, elm.weight]);
          tempWeight.push(elm.weight);
          tempHeight.push(elm.height);
        }
      });
      let { line, r } = regression(tempWeight, tempHeight);
      return [temp, line, r];
    };

    const getDataSport = (sportName) => {
      let temp = [],
        tempWeight = [],
        tempHeight = [];

      data.forEach((elm) => {
        if (elm.sport == sportName && elm.weight > 0 && elm.height > 0) {
          temp.push([elm.height, elm.weight]);
          tempWeight.push(elm.weight);
          tempHeight.push(elm.height);
        }
      });
      let { line, r } = regression(tempWeight, tempHeight);
      return [temp, line, r];
    };
    
    let series = [],
      visible = false,
      index = 0,
      activate = ["Football"];
    discipline.forEach((e) => {
      if (activate.indexOf(e.name) > -1) {
        visible = true;
      } else {
        visible = false;
      }
      let [scatterData, line, r] = getDataSport(e.data);
      series.push(
        {
          type: "scatter",
          visible: visible,
          name: e.name,
          data: scatterData
        },
        {
          name: e.name,
          visible: visible,
          r: r,
          data: line
        }
      );
    });

    Highcharts.chart("container", {
      
      chart: {
        type: "line",
        zoomType: "y",
      },

      title: {
        text: "2012 Olympic football athletes' weight and height relationship"
      },
      
      xAxis: {
        title: {
          text: "Height"
        },
        labels: {
          format: "{value} m"
        },
      },
      
      yAxis: {
        title: {
          text: "Weight"
        },
        labels: {
          format: "{value} kg"
        }
      },
      
      legend: {
        enabled: true
      },
      
      plotOptions: {
        scatter: {
          marker: {
            radius: 2.5,
            symbol: "circle",
            states: {
              hover: {
                enabled: true,
                lineColor: "rgb(100,100,100)"
              }
            }
          },
          states: {
            hover: {
              marker: {
                enabled: false
              }
            }
          }
        },
        line: {
          lineWidth: 2.5
        }
      },

      tooltip: {
        formatter: function () {
          if (this.series.data.length > 2) {
            return (
              this.series.name +
              "<br/>Height: " +
              this.x +
              " m<br/>Weight: " +
              this.y +
              " kg"
            );
          } else {
            return (
              this.series.name +
              "<br/>r: " +
              this.series.userOptions.r.toFixed(2)
            );
          }
        }
      },
      
      series: series
    });
  }
);

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>