8

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

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 的值。

形象的

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

有没有更简单的方法来做到这一点？

4

1 回答 1

9

一个非常好的问题！

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

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

  • 您总是希望 valueX1(90) 与 valueY1(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);
}

根据图表加载时 series1 的计算（通过 highcharts）最小值/最大值调整 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();
于 2012-12-29T19:19:23.160 回答