Как добавить в Stack Effect преградить диаграмма в JQuery ФЛОТ

Question

У меня есть проблема с JQuery Flot

сначала я получил следующую таблицу 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, 

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

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

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

Я надеюсь, что бары только в центре, Как я могу исправить эту проблему? Спасибо большое!

Answer 1

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

Во-первых, добавить новый набор данных для ваших данных:

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

[0,0] ваша ось х мин и [10,0] ваша ось у мин.

Тогда я немного изменил свои варианты сюжета, так что ваш $.plot вызов выглядел следующим образом:

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

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

Answer 2

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

Устанавливая следующий код:

//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" }]; 

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

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