Как добавить эффект стека к гистограмме в jQuery flot

У меня проблема с jquery float

сначала я получил следующую диаграмму http://design2u.me/blog/example/bar/index.html

Код следующий:

<script type="text/javascript">
$(function () {
    // generate a dataset
        var d1 = []; d1.push([3,100]);
        var d2 = []; d2.push([3,66]);
        var d3 = []; d3.push([3,33]);

        //announce a dataset
        var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];      
        var placeholder = $("#placeholder");

        // plot it
        var plot = $.plot(placeholder, data, {
                stack:true,
                bars: { show: true, barWidth: 4, fill: 0.5 },
                xaxis: { ticks: [], autoscaleMargin: 0.02 , min: 0, max: 10  },
                yaxis: { min: 0, max: 120 },
        });
});
</script>

Однако мне нужно, чтобы другая часть была сложена, и я уже добавляю свойство

stack:true,

Пробуя и ошибаясь, я обнаружил, что если я изменю функцию графика следующим образом:

var plot = $.plot(placeholder, data, {
            series: {
                stack:true,
                bars: { show: true, barWidth: 4, fill: 0.5 },
                xaxis: { ticks: [], autoscaleMargin: 0.02 , min: 0, max: 10  },
                yaxis: { min: 0, max: 120 },
            }
        });

то я получил следующий результат: http://design2u.me/blog/example/bar/index2.html

бруски уложены успешно, но стали слишком широкими...

Надеюсь полосы только по центру, как решить эту проблему? Большое спасибо !


jquery flot
person Chi Chieh Peng    schedule 09.03.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ну, я думаю, что это, вероятно, ошибка во флоте. Я думаю, что если у вас есть более одной точки данных на серию, это будет работать лучше. Как бы то ни было, единственный способ понять, как это сделать, - добавить «фиктивную» линию, чтобы заставить ось X иметь правильную ширину и оставить столбцы одинаковой ширины:

Сначала добавьте новый набор данных к вашим данным:

{
data: [[0, 0], [10, 0]],
bars: {
    show: false
},
lines: {
    show: false
}}

[0,0] — это минимум по оси X, а [10,0] — минимум по оси Y.

Затем я немного изменил ваши параметры сюжета, поэтому ваш вызов $.plot выглядел так:

var plot = $.plot(placeholder, data, {
    series: {
        stack:true,
        bars: {
            show: true,
            barWidth: 1,
            fill: 0.5,
            align: 'center'
        }
    }
});​

В результате получается этот рабочий пример: http://jsfiddle.net/ryleyb/92v2h/.

person Ryley    schedule 09.03.2012

arrow_upward
0
arrow_downward

Я нашел простой способ решить свою проблему.

Исправив следующий код:

//announce a dataset
        var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];

в

//announce a dataset
        var data = [{ stack: true, data: d1, color: "#f21d1d" },{ stack: true, data: d2, color: "#1d61f2" },{ stack: true, data: d3, color: "#5bc91a" }];

и проблема решена. В результате этого рабочего wxample: http://jsfiddle.net/divaka/q8srK/

Спасибо за каждый ответ.

person Chi Chieh Peng    schedule 11.03.2012