8

グラフィックで血圧を表現していますが、収縮期と拡張期の両方とグラフィックを表現したいと思います。通常、これらのグラフィックは次のルールに従って一緒に表示されます。

90収縮期圧は拡張期60と同じレベルである必要があります140収縮期圧は拡張期90と同じレベルである必要があります

だから私はそれが人ベースで設定されている最大値と最小値のせいであると思ったので、私はその問題を解決するためにこれを開発しました：

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以下の値を返します。

グラフィック

しかし、それは機能しません。最初のセットと一致しますが、失敗します。

これを行う簡単な方法はありますか？

4

1 に答える 1

9

とてもいい質問です!!!

これは、プログラミング/ハイチャートの問題というよりも、数学/幾何学の問題です。しかしねえ、このジャグラリーには全体の主題があります。コンピューターグラフィックス ！！

私があなたの質問を正しく理解した場合（私がそうしたことを願っています、そうでなければ存在しない問題を解決するために1時間費やし、別の人が理解できる答えを起草しました）。

  • 常にvalueX1（90）をvaludY1（60）と位置合わせし、valueX2（140）をvalueY2（90）と位置合わせする必要があります。XとYは異なるy軸にプロットされます。

これが解決策です。必要なポイントがそれ自体で正しく位置合わせされるように、2つの軸の最小値と最大値を正しく位置合わせするだけです。

これが私たちのやり方です。

  • ハイチャートによって計算された最小値と最大値を一方の軸に対してそのまま受け入れ、以下に基づいてもう一方の軸の最小値と最大値を計算します。（どの軸を受け入れるかは難しい場合がありますが、それはこの質問の範囲外になるか、宿題として残ります=]）。ハイチャートから1番目の軸の値を受け入れて、2番目の軸の値を計算してみましょう。

  • min1/max1に基づいてmin2/max2を計算する方法は？

    線形方程式を解く2点形式として知られているものを使用します

    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の計算された（ハイチャートによる）最小/最大に基づいて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 に答える