Javascript 海图上的双y轴匹配

我在图形上表示血压，我想表示收缩压和舒张压以及图形。通常，这些图形按照以下规则一起显示：

90收缩压应与60舒张压相同 140收缩压应与90舒张压相同

所以我认为这是因为max和mins是以人为基础的，所以我开发了这个来解决这个问题：

function getObjectSystolicDiastolic(){
    var min_systolic = getMinValue(80,person.data,10),
        max_systolic = getMaxValue(150,person.data,10),
        min_diastolic = getMinValue(50,person.data,10),
        max_diastolic = getMaxValue(120,person.data,10),
        min_systolic_eq = min_diastolic*(140-90)/(90-60) + 90 - 60*(140-90)/(90-60),
        max_systolic_eq = max_diastolic*(140-90)/(90-60) + 90 - 60*(140-90)/(90-60);

    // Getting the largest range
    var min_total = min_systolic < min_systolic_eq ?  min_systolic : min_systolic_eq;
    var max_total = max_systolic < max_systolic_eq ? max_systolic : max_systolic_eq;

    return {
        min_systolic : min_total,
        max_systolic : max_total,
        min_diastolic : (min_total - 90 + 60*(140-90)/(90-60))*(90-60)/(140-90),
        max_diastolic : (max_total - 90 + 60*(140-90)/(90-60))*(90-60)/(140-90)
    };
}

函数getObjectSystolicDiastolic（）{ var min_systolic=getMinValue（80，个人数据，10）， max_systolic=getMaxValue（150，个人数据，10）， min_舒张期=getMinValue（50，个人数据，10）， 最大舒张压=getMaxValue（120，个人数据，10）， 最小收缩压=最小舒张压*（140-90）/（90-60）+90-60*（140-90）/（90-60）， 最大收缩压=最大舒张压*（140-90）/（90-60）+90-60*（140-90）/（90-60）； //获得最大射程 var min_total=min_systolic 基本上，首先从人员数据或提供的值中获取最小值和最大值。例如，

getMinValue（80，person.data，10）

将返回不大于80的值，即使所有值都大于80

但它不起作用。它与第一组匹配，但随后失败

---

有更简单的方法吗？

一个非常好的问题

这更像是一个数学/几何问题，而不是编程/图表问题。但是，嘿，这个把戏有一个完整的主题计算机图形

如果我答对了你的问题（我希望我答对了，否则就花一个小时解决一个不存在的问题，再花一个小时起草一个可以理解的答案）

• 您总是希望valueX1（90）与ValueDY1（60）对齐，valueX2（140）与valueY2（90）对齐。X和Y绘制在不同的Y轴上

这是解决办法。 我们所需要做的就是将两个轴的最小值和最大值正确对齐，以使所需的点自身也正确对齐

下面是我们如何做到这一点

• 接受highcharts计算的最小值和最大值，就像它是一个轴一样，并根据以下内容计算另一个轴的最小值和最大值。（要接受哪个轴可能很棘手，这将超出此问题的范围，或者作为家庭作业=]）。让我们继续从highchart接受第一个轴的值，并计算第二个轴的值

• 如何基于min1/max1计算min2/max2
  我们使用被称为的方法来解线性方程组

  y - y1 = (y2-y1)/(x2-x1)*(x-x1)
  

  这里x1=90，y1=60，x2=140，y2=90。将值x设置为相应的值y。将min1放入min2，将max1放入max2

代码

var ticksX = {
    t1: 90,
    t2: 140
};
var ticksY = {
    t1: 60,
    t2: 90
};

function findY(X) {
    return ticksY.t1 + (X - ticksX.t1) * (ticksY.t2 - ticksY.t1) / (ticksX.t2 - ticksX.t1);
}

根据图表负载上计算的（通过highcharts）系列1的最小/最大值调整系列2的最小/最大值

var chart = new Highcharts.Chart({...}, function() {
  var minX = this.yAxis[0].getExtremes().min;
  var maxX = this.yAxis[0].getExtremes().max;
  this.yAxis[1].setExtremes(findY(minX), findY(maxX));
});​

您将需要摆弄刻度设置和网格线。将把这个问题排除在讨论范围之外，因为它们弥补了一个不同的问题

更新：根据新极端值重新调整刻度的代码

//Adjusting ticks
var ticks = 5;
var intervalX = (maxX - minX) / (ticks - 1);
var intervalY = (maxY - minY) / (ticks - 1);
var xTicks = [],
    yTicks = [];
for (var i = 0; i < ticks; i++) {
    xTicks.push(minX + i * intervalX);
    yTicks.push(minY + i * intervalY);
}

chart.yAxis[0].options.tickPositions = xTicks;
chart.yAxis[1].options.tickPositions = yTicks;

chart.yAxis[0].redraw(false);
chart.yAxis[1].redraw(false);
chart.redraw();

//调整刻度
var=5；
var区间=（maxX-minX）/（ticks-1）；
变量区间=（最大-最小）/（滴答-1）；
var xTicks=[]，
yTicks=[]；
对于（变量i=0；i

jsFiddle确实有助于加快速度……首先，感谢您的时间，Jugal，您真的让我心旷神怡。这是您请求的JSFIDLE和您提供的代码，您可以看到，它不起作用了…：（嘿@AntonioLaguna我已经更新了我的答案，以便更好地解释（至少这是计划）.你看，我和你的孩子玩的时候fiddle@AntonioLaguna正如我在回答中提到的，你需要四处游荡，以使刻度线和网格线正确就位。试试看，不要那么困难。@AntonioLaguna&刻度线对齐后，也更新了答案。现在要睡觉了！！！我试过了，但显示的刻度线不是圆形的像90100110，但像92.5一样浮动。