Highcharts上的双y轴匹配

Question

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

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

所以我认为这是因为max和min是设置人员的基础所以我开发了这个来尝试解决这个问题:

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,也会返回不大于80的值.

但它不起作用.它匹配第一组但随后失败.

有更简单的方法吗？

Answer 1

一个非常好的问题!!!

它更像是一个数学/几何问题,而不是编程/高图问题.但是嘿,这个杂耍上有一个完整的主题.电脑图像 !!

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

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

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

我们就是这样做的.

• 接受由高位图计算的最小值和最大值,就像其中一个轴一样,并根据以下内容计算另一个轴的最小值和最大值.(接受哪个轴可能会很棘手,会让这个问题超出这个问题的范围或作为家庭工作=]).让我们继续从高图中接受第一轴的值,并为第二个自己计算值.

• 如何根据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设为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));
});?

在多个轴上对齐刻度| 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();