Javascript Flotchart堆叠条总标签

我正在使用Flotcharts创建一个堆叠条形图，以显示值的细分。我这样做是为了，一旦我将鼠标悬停在堆栈上，它将显示一个工具提示，其中包含该堆栈的值（您可以在第二列中看到）

我需要的是在所有堆栈的顶部显示一个总值标签。

差不多

你可以在下面看到我的代码。我循环遍历数据（使用Smarty）并将其设置在那里

// set the data
var data = [
    {
        label: 'Tenant',
        data: [
            {foreach $metrics.rent_applied_by_month as $rent_applied}
                [{$rent_applied@index}, {$rent_applied.tenant_value|number_format:2:'.':''}],
            {/foreach}
        ],
        color: '#008000'
    },
    {
        label: 'Benefit',
        data: [
            {foreach $metrics.rent_applied_by_month as $rent_applied}
                [{$rent_applied@index}, {$rent_applied.benefit_value|number_format:2:'.':''}],
            {/foreach}
        ],
        color: '#0000ff'
    }
];

// set the xasis labels
var ticks = [
    {foreach $metrics.rent_applied_by_month as $rent_applied}
        [{$rent_applied@index}, '{$rent_applied.period}'],
    {/foreach}
];

// chart options
var options = {
    series: {
        stack: 0,
        bars: {
            show: true,
            align: "center",
            barWidth: 0.6,
            fill: .75,
        }
    },
    xaxis: {
        ticks: ticks,
        tickLength: 1
    },
    grid: {
        hoverable: true,
        clickable: true,
        borderWidth: {
            top: 0,
            right: 0,
            bottom: 1,
            left: 1
        },
        borderColor: {
            top: "#e5e5e5",
            right: "#e5e5e5",
            bottom: "#a5b2c0",
            left: "#a5b2c0"
        }
    },
    legend: {
        show: true,
        noColumns: 2,
        position: "nw",
        margin: [10, 0],
        labelBoxBorderColor: null
    }
};

$.plot("#rent_applied", data, options);

---

您需要循环遍历每个堆栈中的每个条，以获得每个堆栈中所有条的总值。有了该总值，您可以将其传递到flot的方法中，以获得堆叠钢筋顶部的位置

下面的代码有一个示例方法来获取一堆条形图的所有值，然后使用

plot.pointOffset（）

在条形图顶部附加一个显示值的

div

$（函数（）{
风险值数据=[{
数据：[[0,21.51]，[1,32.50]，[2,47.14]，[3,10]，
堆栈：0，
标签：“底部”
}, {
数据：[[0,37.77]，[1,24.65]，[2,7.67]，[4,15]，
堆栈：0，
标签：“顶部”
}];
变量选项={
系列：{
酒吧：{
秀：没错，
条宽：.5，
对齐：“居中”
},
要点：{show:false}
}
};
变量图=$.plot（$（“#图”），数据，选项；
displayBarValues（）；
//在条形图顶部显示值
函数displayBarValues（）{
var plotData=plot.getData（）；
var xValueToStackValueMapping=[]；
//循环遍历每个数据系列
对于（变量i=0；i
#图形{
保证金：0自动；
文本对齐：居中；
宽度：600px；
高度：400px；
}
.数据点值{
位置：绝对位置；
空白：nowrap；
字体大小：11px；
}
您需要遍历每个堆栈中的每个条，以获得每个堆栈中所有条的总值。有了该总值，您可以将其传递到flot的方法中，以获得堆叠钢筋顶部的位置

下面的代码有一个示例方法来获取一堆条形图的所有值，然后使用
plot.pointOffset（）
在条形图顶部附加一个显示值的
div


$（函数（）{
风险值数据=[{
数据：[[0,21.51]，[1,32.50]，[2,47.14]，[3,10]，
堆栈：0，
标签：“底部”
}, {
数据：[[0,37.77]，[1,24.65]，[2,7.67]，[4,15]，
堆栈：0，
标签：“顶部”
}];
变量选项={
系列：{
酒吧：{
秀：没错，
条宽：.5，
对齐：“居中”
},
要点：{show:false}
}
};
变量图=$.plot（$（“#图”），数据，选项；
displayBarValues（）；
//在条形图顶部显示值
函数displayBarValues（）{
var plotData=plot.getData（）；
var xValueToStackValueMapping=[]；
//循环遍历每个数据系列
对于（变量i=0；i