javascript - 積み上げ棒グラフをフロートし、マウスオーバーで棒値を表示します

Question

Flotのツールチップ機能を理解しようとしていますが、実際には頭を悩ませていません。

積み上げ棒グラフの各セクションのラベルと値を表示するツールチップを実現しようとしています

誰かが私をこの例に向けたり、そうするためのコードを提供したりすることができますか？

Answer 1

次のコードは、データポイントのホバーを示すFlotの例に基づいて、Flotの積み上げ棒グラフで機能します。秘訣は、積み上げグラフの「アイテム」値が累積的であるため、ツールチップに表示される「y」値は、最初に下のバーのデータポイントを差し引く必要があるということです。

var previousPoint = null;
$("#chart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
                y = item.datapoint[1] - item.datapoint[2];

            showTooltip(item.pageX, item.pageY, y + " " + item.series.label);
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = null;            
    }
});

Flotのドキュメントではこれは見つかりませんでしたが、item.datapoint配列には実際に必要なものが含まれているようでした。

Answer 2

上記のコードは私にとって再描画の問題を引き起こしました。改善されたコードは次のとおりです。

var previousPoint = [0,0,0];
$("#regionsChart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint[0] != item.datapoint[0]
            || previousPoint[1] != item.datapoint[1]
            || previousPoint[2] != item.datapoint[2]
        ) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
                y = item.datapoint[1] - item.datapoint[2];

            showTooltip(item.pageX, item.pageY, item.series.label + " " + y.toFixed(0) );
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = [0,0,0];
    }
});

Answer 3

これは上記のThomasと同じですが、ホバーアクションがブロックされないようにツールチップを上に移動した点が異なります。

var previousPoint = [0,0,0];
$("#regionsChart").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint[0] != item.datapoint[0]
            || previousPoint[1] != item.datapoint[1]
            || previousPoint[2] != item.datapoint[2]
        ) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
                y = item.datapoint[1] - item.datapoint[2];

            showTooltip(item.pageX, item.pageY - 35, item.series.label + " " + y.toFixed(0) );
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = [0,0,0];
    }
});

Answer 4

解決策は、tooltipOpts- > contentメソッドとコールバック関数を使用して、動的データをラベルに適切に返すことです。

「tooltipOpts」のコールバック関数に4番目の引数を渡すと、実際には、チャート/グラフの作成元となるデータオブジェクト全体が得られることがわかりました。ここから、抽出するラベルのインデックスと同じ関数の2番目の引数を使用して、X軸ラベルを簡単に抽出できます。

例：

プロット関数に渡すデータオブジェクト：

[
    { data: [[1,137],[2,194],[3,376],[4,145],[5,145],[6,145],[7,146]] }
],
{
    bars: { show: true, fill: true, barWidth: 0.3, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: 'center' },
    colors: ['#fcc100'],
    series: { shadowSize: 3 },
    xaxis: {
        show: true,
        font: { color: '#ccc' },
        position: 'bottom',
        ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']]
    },
    yaxis:{ show: true, font: { color: '#ccc' }},
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
    tooltip: true,
    tooltipOpts: {
        content: function(data, x, y, dataObject) {
            var XdataIndex = dataObject.dataIndex;
            var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
            return y + ' stories created about your page on ' + XdataLabel
        },
        defaultTheme: false,
        shifts: { x: 0, y: -40 }
    }
}

上記のデータオブジェクトからレンダリングされた棒グラフ：

画像プレビューでわかるように、ラベルのコンテンツを実際のデータから動的にレンダリングするために使用されるロジックは次のとおりです。

tooltipOpts: {
    content: function(data, x, y, dataObject) {
        var XdataIndex = dataObject.dataIndex;
        var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
        return y + ' stories created about your page on ' + XdataLabel;
    },
    defaultTheme: false,
    shifts: { x: 0, y: -40 }
}