Как я могу отображать гистограммы в Flot горизонтально? - PullRequest
Новая
       28

Как я могу отображать гистограммы в Flot горизонтально?

4 голосов
/ 10 марта 2012

Я вижу, как отображать столбцы в формате flot с горизонтальными или вертикальными столбцами, которые можно «сложить» по вертикали, но я не могу найти примеры того, как отображать столбчатые элементы с горизонтальным и сложенным расположением.* Как бы я это сделал?

Вот мой код, скопированный с постера ниже, но все же бары не будут складываться 

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="flot/jquery.flot.js"></script>
  <script type="text/javascript" src="flot/jquery.flot.stack.js"></script>
  <script type="text/javascript">

$(function () {


var d1 = [];
for (var i = 0; i <= 10; i += 1)
    d1.push([parseInt(Math.random() * 30),i]);


var d2 = [];
for (var i = 0; i <= 10; i += 1)
    d2.push([parseInt(Math.random() * 30),i]);

var d3 = [];
for (var i = 0; i <= 10; i += 1)
    d3.push([parseInt(Math.random() * 30),i]);

$.plot($("#placeholder"), [ d1, d2, d3 ], { series: {
            stack: true,
            lines: { show:false },
            bars: { show: true, barWidth: 0.6, horizontal:true } }  });

});

</script>

<title>Test</title>
</head>

<body>

<div id="placeholder" style="width:600px;height:300px;"></div>
</body>
</html>

1 Ответ

6 голосов
/ 10 марта 2012

Просто укажите stack:true и в своем определении баров horizontal:true, это должно быть ... 

    $.plot($("#placeholder"), data, {
        series: {
            stack: true,
            lines: { show:false },
            bars: { show: true, barWidth: 0.6, horizontal:true }
        }
    });

Посмотрите, как работает здесь: http://jsfiddle.net/ryleyb/wt6aJ/

...