javascript - Flotchart 堆积条形总标签

Question

我正在使用 Flotcharts 创建堆积条形图来显示值的分割。我已经完成了这项工作，因此一旦我将鼠标悬停在堆栈上，它将显示一个工具提示，其中包含该堆栈的值(您可以在第二列中看到这一点)。

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

类似于 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

您需要循环遍历每个堆栈中的每个条形，以获得每个堆栈中所有条形的总值(value)。有了总值(value)，您可以将其传递到 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>