1

私は現在、highstockを使用して、1日の時間に基づいて利用可能なアイテムの総数をプロットしています（その後、リアルタイムで更新されます）。

アイテムの総数に2つの変更が同時に発生した場合、高在庫では、差の縦棒が表示されます。

同時にy軸が変化します

したがって、私の例の画像では、4299のものから始めて、53個のアイテムが削除され、50個が追加されます（技術的には同時にですが、2つの異なるトランザクションであり、2つのポイントです）。正味の差は-3です。（つまり、{x：5:44:15およびy：4246、変更：-53}、{x：5:44:15、y：4296、変更：50}を取得します）。

だから私の質問：ハイストックでこれらのポイントをマージして垂直バーを取り除き、表示値として4296を使用することは可能ですか？次に、ツールチップフォーマッターを使用して「this.points」をループし、ツールチップに-53の変更と50の変更を表示して、ユーザーが-3の正味の変更をもたらした結果を確認できるようにしたいと考えていました。

これが不可能な場合は、ポイントを自分でマージし、ポイント内のすべての関連情報を渡して、目的のツールチップ（およびグラフの外観）を生成しますが、のすべての機能を利用できるかどうかを確認したいと思います。最初にハイストック-そしてこれらのポイントを別々に保ちます。

ありがとう！

編集：：

new Highcharts.StockChart({
                        chart : {
                            renderTo : 'realTimeChart',
                            zoomType: 'x',
                            backgroundColor: '#feffdd',
                            style: {
                                fontFamily: 'Segoe UI'
                            },
                            type: 'spline'
                        },

                        plotOptions: {
                            area: { animation: false },
                            arearange: { animation: false },
                            areaspline: { animation: false },
                            areasplinerange: { animation: false },
                            bar: { animation: false },
                            column: { animation: false },
                            columnrange: { animation: false },
                            gauge: { animation: false },
                            line: { animation: false },
                            pie: { animation: false },
                            scatter: { animation: false },
                            series: { animation: false },
                            spline: { animation: false }
                        },

                        xAxis: {
                            ordinal: false
                        },

                        tooltip: {
                            animation: false,
                            formatter: function() {
                                var p = '';

                                p += '<span style="font-size: 9px;">' + Highcharts.dateFormat('%A, %b %e, %Y %H:%M:%S', this.x) +'</span><br/>';
                                $.each(this.points, function(i, point){
                                    p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y +'</b>';
                                    if (point.point.where) {
                                        p += '<br />' + point.point.where + ' changed by ' + point.point.change + (point.point.who ? ' (' + point.point.who + ')' : '');
                                    }
                                });

                                return p;

                            }
                        },

                        rangeSelector: {
                            buttons: [{
                                count: 30,
                                type: 'minute',
                                text: '30M'
                            }, {
                                count: 1,
                                type: 'hour',
                                text: '1H'
                            }, {
                                count: 6,
                                type: 'hour',
                                text: '6H'
                            }, {
                                type: 'all',
                                text: 'Day'
                            }],
                            inputEnabled: false,
                            selected: 1
                        },

                        exporting: {
                            enabled: false
                        },

                        series : [{
                            name : 'Available',
                            data : data,
                            lineWidth: 1,
                            states: {
                                hover: {
                                    enabled: false
                                }
                            }
                        }]

データは前に示した形式ですが、xはエポックから実際にはミリ秒単位です。

data = [
        {x: 123456789, y: 2000, where: 'Location', change: 40, who: 'Joe'},
        {x: 123456789, y: 1960, where: 'Location', change: -40, who: 'Bob'},
        ...
    ];
4

1 に答える 1

0

問題を簡単に回避する方法をフォローアップしたかっただけです。秒単位で配置する代わりに、ポイントを分単位で切り捨ててグループ化することにしました (つまり、分のブロックがあります)。

次に、ポイントごとに、その分ブロック内に含まれる実際のポイントの配列を新しい引数として渡し、その分ブロックの y 値を更新しました。次に、ツールチップ フォーマッタを使用して、その分のブロック内のすべての変更を実際の変更時刻とともに表示しました。これにより、同じ x 軸のこれらすべてのハード垂直ポイントではなく、より流れるようなグラフが得られました。

特定の x 軸ポイントのデータ ポイントを簡単に変更するために、ハイチャートの series.data 配列内に分のブロックの位置の別の配列を保持しました。時系列でした。

これが私のタスクをどのように達成したかです: 参照配列を作成します:

var pointIndex = {};

その日の履歴データから初期データ シリーズを作成しました (ajax 経由で取得)。

var data = [];
var time = Math.floor(actual_time / 60000) * 60000;
pointIndex[time] = data.push({x: time, y: items_available, change: [{when: actual_time}]});

したがって、actual_time はエポック (偶数の変更が発生したとき) からのミリ秒数であり、それを最も近い分に丸めて分単位の時間ブロックを取得します。change は、ツールチップに表示するすべての実際のポイントを保持する引数です。

したがって、新しいポイントを追加するときは、分のブロックが存在するかどうかを確認し、存在しない場合は新しいポイントを追加し、そうでない場合は古いポイントを更新します。

var time = (new Date()).getTime();
var point = Math.floor(time / 60000) * 60000;
if (pointIndex[point]) {
    var change = chart.series[0].data[pointIndex[point]].change;
    change.push({when: time});
    chart.series[0].data[pointIndex[point]].update({x: point, y: items_available, change: change});
} else {
    pointIndex[point] = chart.series[0].data.length;
    chart.series[0].addPoint({x: point, y: items_available, change: [{when: time}]}, false, false);
}

(すべての場合において、ポイントの更新が完了した後に実際のチャートの更新を行います。)

うまくいけば、それは自分が同じ立場にいる他の誰かを助けるでしょう!

編集:: (フォーマッタを忘れました):

tooltip: {
    animation: false,
    formatter: function() {
        var p = '';

        p += '<span style="font-size: 9px;">' + Highcharts.dateFormat('%A, %b %e, %Y %H:%M', this.x) +'</span><br/>';
        $.each(this.points, function(i, point){
            p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y +'</b>';
            if (point.point.change) {
                for(var j = 0; j < point.point.change.length; ++j) {
                    p += '<br />Change at: ' + new Date(point.point.change[j].when).toTimeString();
                }
            }
        });

        return p;

    }
}
于 2012-11-20T15:58:21.877 に答える