jqplot - отдельные значения, а не итоги в диаграмме с накоплением - PullRequest
Новая
       1

jqplot - отдельные значения, а не итоги в диаграмме с накоплением

9 голосов
/ 28 января 2012

В столбчатой ​​диаграмме с накоплением мы можем показать итоговое значение каждой серии в каждом стеке, например так: current Однако я хочу, чтобы значение каждой серии отображалось, а не итоговое, как это (пожалуйста, игнорируйте тот факт, что два образца имеют разныеколичество серий) desired Дополнительно я хотел бы показать общее количество стека вверху.Я имею в виду, что если вы посмотрите на первый график, в первом столбце значения будут 5,15 (5 + 10), 24 (15 + 9).Мой желаемый результат должен быть похож на второй график, где значения для первого бара равны, 10,9 и, наконец, итог в верхней 19
Возможно ли с этой библиотекой?

1 Ответ

8 голосов
/ 29 января 2012

Немного взломать здесь.Так как вы хотите еще один ярлык для каждой серии, я представил «пустую» серию.Впрочем, он хорошо воспроизводит то, что вы хотите.Скрипка здесь . 

$(document).ready(function(){
  var s1 = [5, 6];
  var s2 = [7, 5];
  var s3 = [14, 9];
  var s4 = [0, 0]; //empty series just for total labels

  var pLabels1 = []; // arrays for each inner label
  var pLabels2 = [];
  var pLabels3 = [];
  var pLabelsTotal = []; // array of totals above each column
  for (var i = 0; i < s1.length; i++){
      pLabels1.push('<div style="border:1px solid gray">'+s1[i]+'</div>');
      pLabels2.push('<div style="border:1px solid gray">'+s2[i]+'</div>');
      pLabels3.push('<div style="border:1px solid gray">'+s3[i]+'</div>');
      pLabelsTotal.push(s1[i]+s2[i]+s3[i]);      
  }   

  plot3 = $.jqplot('chart2', [s1, s2, s3, s4], {
    // Tell the plot to stack the bars.
    stackSeries: true,
    captureRightClick: true,
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
          // Put a 30 pixel margin between bars.
          barMargin: 30,
          // Highlight bars when mouse button pressed.
          // Disables default highlighting on mouse over.
          highlightMouseDown: true   
      },
    },
    series:[
        {
            pointLabels:{
                show:true,
                labels:pLabels1,
                ypadding: -25,
                escapeHTML:false
            }
        },
        {
            pointLabels:{
                show:true,
                labels:pLabels2,
                ypadding: -25,
                escapeHTML:false
            }
        },
                {
            pointLabels:{
                show:true,
                labels:pLabels3,
                ypadding: -25,
                escapeHTML:false
            }
        },
              {
            pointLabels:{
                show:true,
                labels:pLabelsTotal,
                ypadding: 7,
                escapeHTML:false
            }
        }
    ],
    axes: {
      xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer
      },
      yaxis: {
        padMin: 0,
        min: 0
      }
    },
    legend: {
      show: false,
    }      
  });
});

Производит:

enter image description here

...