Question

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

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)
    };
}

那，基本上从人数据或提供的值获得最小值和最大值。例如，getMinValue(80,person.data,10)将返回不大于80的值，即使所有值都大于该值。

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

有更简单的方法吗？

Answer 1

一个非常好的问题!!!

它更像是一个数学/几何问题，而不是编程/高图问题。但是嘿，这个杂耍上有一个完整的主题。 计算机图形!!

如果我的问题是正确的（我希望我做到了，否则花一个小时解决一个不存在的问题，另一个起草一个可以理解的答案）。

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

这是解决方案。我们需要做的就是正确对齐两个轴的最小值和最大值，以便所需的点也能正确对齐。

以下是我们如何做到的。

接受min＆amp;最大值由highcharts计算，因为它是其中一个轴并计算min＆amp;基于以下内容的另一轴的最大值。（接受哪个轴可能会很棘手，会让这个问题超出这个问题的范围或作为家庭工作=]）。让我们继续从高图中接受第一轴的值，并为第二个自己计算值。
如何根据min1 / max1计算min2 / max2？

我们使用解决线性方程式 Two-point form 的东西
```
y - y1 = (y2-y1)/(x2-x1)*(x-x1)
```
这里x1 = 90，y1 = 60，x2 = 140，y2 = 90。放置x的值以获得y的对应值。将min1设为min2，将max1设为get2。

<强>代码

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);
}

根据图表载荷上的series1的最小值/最大值计算，调整series2的最小值/最大值

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));
});

<强> Aligning ticks in multiple axes | Highchart & Highstock @ jsFiddle

您需要摆弄刻度线设置和网格线。这会将其排除在范围之外，因为它们会为不同的问题构成更多

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

//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();

Highcharts上的双y轴匹配

1 个答案: