javascript - ハイチャートで2つの線が合流する場所を予測する方法は?

Question

次のグラフには、「範囲」の線と「完了した総作業量」の線、およびそれぞれの点線の傾向線があります。~~(Highcharts はトレンドラインをサポートしていないため、点線を使用してデータの最初と最後のポイントを接続しているだけです。)~~このプラグインをトレンドラインに使用しています。

目的は、点線のトレンドラインを延長し、これらの 2 つの線が右側で交わる日付 (x 軸の値) を見つけることです (可能であり、あまり離れていない場合)。どうやってやるの？

ここに画像の説明を入力

コード: http://jsfiddle.net/AjJZD/6/

$(function () {
    var data1 = [
        [Date.UTC(2013, 4, 28), 40],
        [Date.UTC(2013, 5, 26), 40],
        [Date.UTC(2013, 5, 29), 48],
        [Date.UTC(2013, 7, 21), 48]
    ];
    var data2 = [
        [Date.UTC(2013, 4, 28), 0],
        [Date.UTC(2013, 5, 10), 20],
        [Date.UTC(2013, 5, 19), 22],
        [Date.UTC(2013, 5, 20), 24],
        [Date.UTC(2013, 5, 30), 26],
        [Date.UTC(2013, 6, 1), 28],
        [Date.UTC(2013, 7, 21), 30]
    ];
    var chart_linear = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        colors: ['#912120', '#C00402', '#115DA9', '#115DA9'],
        xAxis: {
            type: 'datetime',
            gridLineWidth: 1,
            gridLineDashStyle: 'shortdot'
        },
        yAxis: {
            min: 0,
            gridLineDashStyle: 'shortdot'
        },
        plotOptions: {
            series: {
                marker: {
                    symbol: 'circle'
                }
            }
        },
        series: [{
            name: 'Scope',
            data: data1
        }, {
            name: 'Scope Change Trend',
            type: 'line',
            marker: {
                enabled: false
            },
            dashStyle: 'longDash',
            data: (function () {
                return fitData(data1).data;
            })()
        }, {
            name: 'Total Effort Done',
            data: data2

        }, {
            name: 'Velocity',
            type: 'line',
            marker: {
                enabled: false
            },
            dashStyle: 'longDash',
            data: (function () {
                return fitData(data2).data;
            })()
        }]
    });
});

score 2 · Accepted Answer

他の 2 つの回答 (特に John Kiernander の回答) のおかげで、「line_intersection.js」という独自のライブラリを作成しました。このライブラリは、2 つの直線の交点を検出する関数を提供し、チャートデータからトレンドラインを生成する関数も提供します。

そのライブラリの getTrendlineData および getLineIntersectionData 関数を使用すると、次のことができます。

コード：

jQuery(function () {
var data1 = [
    [Date.UTC(2013, 0, 1), 50],
    [Date.UTC(2013, 0, 2), 58],
    [Date.UTC(2013, 0, 3), 58],
    [Date.UTC(2013, 0, 4), 58]
];
var data2 = [
    [Date.UTC(2013, 0, 1), 0],
    [Date.UTC(2013, 0, 2), 12],
    [Date.UTC(2013, 0, 3), 18],
    [Date.UTC(2013, 0, 4), 22]
];
var data1_t = getTrendlineData(data1).data;
var data2_t = getTrendlineData(data2).data;
var options = {
    icptPoint: {
        //name: 'Possible release date',
        marker: {
            enabled: true,
            fillColor: '#003300',
            lineColor: '#003300'
        }
    },
    validateIntersection: function(icptX, icptY) {
        // Don't connect the lines if the intersection point is
        // to the left of the chart
        if (icptX < data1_t[0][0] || icptX < data2_t[0][0]) {
            return false;
        }
    }
};
var forecast = getLineIntersectionData(data1_t, data2_t, options);

var chart_linear = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    colors: ['#990000', '#4679BD', '#990000', '#4679BD'],
    xAxis: {
        type: 'datetime',
        gridLineWidth: 1,
        gridLineDashStyle: 'shortdot'
    },
    yAxis: {
        min: 0,
        gridLineDashStyle: 'shortdot'
    },
    title: {
        text: 'Estimating release date'
    },
    series: [{
        name: 'Total issues',
        data: data1
    }, {
        name: 'Closed issues',
        data: data2
    }, {
        name: 'Total issues trend',
        //getLineIntersectionData() may return undefined if lines can not intersect
        data: forecast && forecast.line1_data || data1_t,
        marker: {
            enabled: false
        },
        dashStyle: 'longDash'
    }, {
        name: 'Closed issues trend',
        data: forecast && forecast.line2_data || data2_t,
        marker: {
            enabled: false
        },
        dashStyle: 'longDash',
    }]
});

出力：

ここに画像の説明を入力

ライブデモ: http://vigneshwaranr.github.io/line_intersection.js/demo.html

ライブラリの土台となる例を提供してくれた John Kiernander に感謝します。

score 1 · Accepted Answer

計算をもう少し進めて、テストケースに適用することにしました。元の質問に答えるコードは次のとおりです。

$(function () {
    var scope = [
                [Date.UTC(2013, 4, 28), 40],
                [Date.UTC(2013, 5, 26), 40],
                [Date.UTC(2013, 5, 29), 48],
                [Date.UTC(2013, 7, 21), 48]
            ],
        effort = [
                [Date.UTC(2013, 4, 28), 0],
                [Date.UTC(2013, 5, 10), 20],
                [Date.UTC(2013, 5, 19), 22],
                [Date.UTC(2013, 5, 20), 24],
                [Date.UTC(2013, 5, 30), 26],
                [Date.UTC(2013, 6, 1), 28],
                [Date.UTC(2013, 7, 21), 30]
            ],
        // Change in X for scope
        scopeDX = (scope[scope.length - 1][0] - scope[0][0]),
        // Change in Y for scope
        scopeDY = (scope[scope.length - 1][1] - scope[0][1]),
        // Change in X for effort
        effortDX = (effort[effort.length - 1][0] - effort[0][0]),
        // Change in Y for effort
        effortDY = (effort[effort.length - 1][1] - effort[0][1]),
        // Slope for scope
        scopeG =  scopeDY / scopeDX,
        // Slope for effort
        effortG = effortDY / effortDX,
        // Intercept for scope
        scopeI = scope[0][1] - scopeG * scope[0][0],
        // Intercept for effort
        effortI = effort[0][1] - effortG * effort[0][0],
        // X Coordinate for the intersection
        icptX = -1 * (scopeI - effortI) / (scopeG - effortG),
        // Y Coordinate for the intersection
        icptY = scopeG * icptX + scopeI;

    $('#container').highcharts({
        chart: {},
        colors: [ '#912120', '#C00402', '#115DA9', '#115DA9' ],
        xAxis: {
            type: 'datetime',
            gridLineWidth: 1,
            gridLineDashStyle: 'shortdot'
        },
        yAxis: {
            min: 0,
            gridLineDashStyle: 'shortdot'
        },
        plotOptions: {
            series: {
                marker: {
                    symbol: 'circle'
                }
            }
        },
        series: [{
            name: 'Scope',
            data: scope
        }, {
            name: 'Scope Change Trend',
            data: [
                [scope[0][0], scope[0][1]],
                [scope[scope.length - 1][0], scope[scope.length - 1][1]],
                [icptX, icptY]
            ],
            dashStyle: 'longDash'

        }, {
            name: 'Total Effort Done',
            data: effort
        }, {
            name: 'Velocity',
            data: [
                [effort[0][0], effort[0][1]],
                [effort[effort.length - 1][0], effort[effort.length - 1][1]],
                [icptX, icptY]
            ],
            dashStyle: 'longDash'

        }]
    });
});

これは、線が平行でない場合でも機能すると思います。

これがフィドルです：http://jsfiddle.net/VRf3n/

javascript - ハイチャートで2つの線が合流する場所を予測する方法は?

3 に答える 3

Related

Reference