帶有數組內容的堆棧浮圖圖表工具提示

Question

以下是我的Flot堆棧圖的JS代碼，

我想在其堆棧中的工具提示中顯示d1 [0]的標簽，並在該部分堆棧中顯示d2 [0]的標簽

當前它沒有顯示任何工具提示。

數據示例：

d1 = [["Name1",10],["Name2",5]];
d2 = [["Name1",8],["Name2",10]];

因此，工具提示應在各自的堆棧中顯示Name1（10）和Name1（8），並在其相應的堆棧中顯示Name2（5）和Name2（10）。

function getTooltip2(label, x, y) {
    return "" + x + "( " + y +" )"; 
}

var d1 = [];
var d2 = [];
<?php 
for($i=0;$i<count($tchart)-1;$i++){
    echo "d1.push(['".$tchart[$i][0]."', ".$tchart[$i][1]."]);";
    echo "d2.push(['".$tchart[$i][0]."', ".$tchart[$i][2]."]);";
}
?>

var d4 = { label: "Within Benchmark", data: d1 };
var d5 = { label: "Out Of Benchmark", data: d2 };
var data =[d4,d5];

var stack = 0,
    bars = true,
    lines = false,
    steps = false;

function plotWithOptions() {
    $.plot("#placeholder5", data, {

        valueLabels: {
            show: true
        },
        series: {
            stack: stack,
            lines: {
                show: lines,
                fill: true,
                steps: steps
            },
            bars: {
                show: bars,
                barWidth: 0.6,
                align: "center"
            }
        },
        xaxis: {
           mode: 'categories',
           tickLength: 0
        },
        tooltip: true,
        tooltipOpts: {
            content: getTooltip2,
            defaultTheme: false
        },
        colors: [ "#51a351", "#da4f49"]
    });
}
plotWithOptions();

Answer 1

好的，我找到了。 與其他條形圖中的操作相同。

以下是我使用的代碼，

$.plot("#placeholder6", [d8,d9], {
    grid: {
            hoverable: true 
    },
        valueLabels: {
            show: true
        },
        series: {
            stack: stack,
            lines: {
                show: lines,
                fill: true,
                steps: steps
            },
            bars: {
                show: bars,
                barWidth: 0.6,
                align: "center"
            }
        },
        xaxis: {
           //show:false,
           mode: 'categories',
           tickLength: 0
        },
        yaxis: {
           //show:false,
           //mode: 'categories',
           //tickLength: 0
           tickDecimals:0
        },
        tooltip: true,
        tooltipOpts: {
            content: "%x (%y)",
            defaultTheme: false
        },
        colors: [ "#faa732", "#da4f49"]
    });