Question

我试图用堆积条形图的百分比值填充jqPlot图表。我通过mysql和COUNT获取了数据。例如，如果我有4个类别和12个月，我可以生成：

var s1 = [0, 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, ]; 
var s2 = [0, 5, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, ]; 
var s3 = [0, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, ]; 
var s4 = [0, 3, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, ];

生成带有数字的堆积条形图，每个变量的每个数字都是月份值。

现在我想显示一个堆积的条形图，其中每个月的值是百分比。我必须以某种方式能够使用数组的值进行百分比计算。例如：添加位置2（二月）(100/(2+5+3+3))的所有值，然后乘以位置二。

我无处可寻。

编辑：谢谢你的快速回答。

我会尝试更好地解释。我从“MySQL＆＃39;”中获取数据。查询，然后到PHP数组，然后将其转换为字符串以将其粘贴到JavaScript以进行绘图：

Answer 1

尝试使用for循环计算您想要获得的百分比并将其再次放入数组中

$(document).ready(function(){
    var s1 = [0, 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, ]; 
    var s2 = [0, 5, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, ]; 
    var s3 = [0, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, ]; 
    var s4 = [0, 3, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, ]; 
    var s5 = new Array();
    for (var i = 0; i < s1.length; i++){
        //Or use your own formula on getting the value you wanted.
        s5.push(100/(s1[i]+s2[i]+s3[i]+s4[i]);
    }

    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = ['January','February','March','April','May','June','July','August','September','October','November','December'];

    var plot1 = $.jqplot('chart1', [s1, s2, s3, s4, s5], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true}
        },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Hotel'},
            {label:'Event Regristration'},
            {label:'Airfare'}
        ],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '$%d'}
            }
        }
    });
});

Answer 2

<script>
    /* are there to be more than 4 arrays? */
    var s1 = [0, 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, ]; 
    var s2 = [0, 5, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, ]; 
    var s3 = [0, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, ]; 
    var s4 = [0, 3, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, ];

    /* add new arrays to this array */
    var arrs=[s1,s2,s3,s4];

    var pc=[];
    for( var i=0; i < arrs[0].length; i++ ){
        var a=0;
        for( var j=0; j < arrs.length; j++ ){
            if( !isNaN( arrs[ j ][ i ] ) ) a+=arrs[ j ][ i ];
        }
        console.log( 'i=%d, j=%d, a=%d', i, j, a );
        /* confused by the `then multiply with positon two` */
        pc.push( a > 0 ? Math.round( 100 / a ) : 0 );
    }

    alert( pc );

</script>

Answer 3

如果我理解正确，它将适用于您的情况：

  function getPercent(array){
    var return_array = [];
    var total_sum = 0; // total sum of data
    for(var i = 0; i < array.length; i++){
      total_sum += array[i].reduce(function(pv, cv) { return pv + cv; }, 0);
    }

    for( var i=0; i < array[0].length; i++ ){
        var sum = 0; // month sum
        for( var j=0; j < array.length; j++ ){
            sum += array[j][i];
        }

        return_array[i] = sum*100/total_sum; // percent calculation of the month
    }

    return return_array;
  }

  var s1 = [0, 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, ]; 
  var s2 = [0, 5, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, ]; 
  var s3 = [0, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, ]; 
  var s4 = [0, 3, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, ];
  var data=[s1,s2,s3,s4];

  var percent = getPercent(data);

  console.log(percent);

结果是：

[0, 61.904761904761905, 4.761904761904762, 4.761904761904762, 19.047619047619047, 9.523809523809524, 0, 0, 0, 0, 0, 0]

从数组计算百分比

3 个答案: