Flotchart堆叠巴总标签

Question

我使用Flotcharts创建堆积条形图来显示值的击穿。我有这个工作，所以一旦我将鼠标悬停在堆栈上，它会显示一个工具提示，其中包含该堆栈的值（可以在第二列中看到）。

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

类似于High Charts Stacked Column。

你可以在下面看到我的代码。我循环访问数据（使用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); 

Answer 1

您需要循环遍历每个堆栈中的每个条，以获得每个堆栈中所有条的总值。有了这个总值，你可以将它传递给flot的plot.pointOffset()方法来获得堆积条顶部的位置。

下面的代码有一个示例方法来获取一堆条的所有值，然后使用plot.pointOffset()附加一个div，显示该条的顶部值。

$(function() { 
 
    var data = [{ 
 
    data: [ [0, 21.51], [1, 32.50], [2, 47.14], [3, 10] ], 
 
    stack: 0, 
 
    label: 'Bottom' 
 
    }, { 
 
    data: [ [0, 37.77], [1, 24.65], [2, 7.67], [4, 15]], 
 
    stack: 0, 
 
    label: 'Top' 
 
    }]; 
 

 
    var options = { 
 
    series: { 
 
     bars: { 
 
     show: true, 
 
     barWidth: .5, 
 
     align: "center" 
 
     }, 
 
     points: { show: false } 
 
    } 
 
    }; 
 

 
    var plot = $.plot($('#graph'), data, options); 
 

 
    displayBarValues(); 
 

 
    // display values on top of bars 
 
    function displayBarValues() { 
 
    var plotData = plot.getData(); 
 
    var xValueToStackValueMapping = []; 
 

 
    // loop through each data series 
 
    for (var i = 0; i < plotData.length; i++) { 
 
     var series = plotData[i]; 
 

 
     // loop through each data point in the series 
 
     for (var j = 0; j < series.data.length; j++) { 
 
     var value = series.data[j]; 
 

 
     // if the x axis value is not in the mapping, add it. 
 
     if (!xValueExistsInMapping(xValueToStackValueMapping, value[0])) { 
 
      xValueToStackValueMapping.push([value[0], 0]); 
 
     } 
 

 
     // add the value of the bar to the x value mapping 
 
     addValueToMapping(xValueToStackValueMapping, value[0], value[1]); 
 
     } 
 
    } 
 

 
    // loop through each of our stacked values and place them on the bar chart 
 
    $.each(xValueToStackValueMapping, function(i, value) { 
 
     // find the offset of the top left of the bar 
 
     var leftoffset = plot.pointOffset({ x: value[0] - .5, y: value[1] }); 
 

 
     // find the offset of the top right of the bar (our bar width is .5) 
 
     var rightoffset = plot.pointOffset({ x: value[0] + .5, y: value[1] }); 
 

 
     $('<div class="data-point-value">' + value[1] + '</div>').css({ 
 
     left: leftoffset.left, 
 
     top: leftoffset.top - 14, 
 
     width: rightoffset.left - leftoffset.left, 
 
     textAlign: 'center' 
 
     }).appendTo(plot.getPlaceholder()); 
 
    }); 
 

 

 
    } 
 

 
    function xValueExistsInMapping(mapping, value) { 
 
    for (var i = 0; i < mapping.length; i++) { 
 
     if (mapping[i][0] !== undefined && mapping[i][0] === value) { 
 
     return true; 
 
     } 
 
    } 
 
    return false; 
 
    } 
 

 
    function addValueToMapping(mapping, xValue, yValue) { 
 
    for (var i = 0; i < mapping.length; i++) { 
 
     if (mapping[i][0] === xValue) { 
 
     mapping[i][1] = mapping[i][1] + yValue; 
 
     } 
 
    } 
 
    } 
 
});

#graph { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 600px; 
 
    height: 400px; 
 
} 
 

 
.data-point-value { 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    font-size: 11px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script> 
 
<script src="https://rawgit.com/flot/flot/master/jquery.flot.stack.js"></script> 
 
<div id="graph"></div>