Question

下面是我的fls堆栈图表的js代码，

我想在堆栈的工具提示中显示d1 [0]的标签，并在堆栈的那一部分显示d2 [0]的标签

目前它没有显示任何工具提示。

数据示例：

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

因此工具提示应在各自的堆栈中显示Name1（10）和Name1（8）其respactive堆栈中的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"]
    });

Stack Flot图表工具提示，包含数组内容

1 个答案: