Jquery 每个x轴项目的两个条形图和第二个条形图必须在jqplot图表中显示类似百分比的值（百分比）

我得到了每个x轴项目有两个条形图的条形图。 每个x轴项目中的第二个条形值始终小于第一个条形值。 我需要在第二个条形标签中显示它与第一个条形值的百分比

例如：

600|  550 
500|   H
400|   H 350(63,63%)
300|   H  H
200|   H  H
100|___H__H______________________________ 
         1      2      3      4      5    

label formatter函数（它应执行所有计算并将值返回到第二个条形图值）：

点标签的定义如下：

pointLabels: { show:true, formatString: "%#.3f",  formatter: $.jqplot.LabelFormatter}

---

以下是解决您问题的解决方法：

这是解决您问题的代码，请对此代码进行更改或抓住重要部分并将其放入您的代码中

$(document).ready(function () {
    var s1 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    var s2 = [5, 15, 15, 30, 45, 60, 35, 49, 75, 95];
    var ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var seriesData = [], seriesIndex = 0;

    function storeSeriesData(){
        seriesData[seriesIndex] = this.data;
        seriesIndex = seriesIndex + 1;
    }

    $.jqplot.LabelFormatter = function(format, val){ 
        var result, pointVal = -1;
        if(seriesIndex > 1){
            for(var i = 0; i < seriesData[seriesIndex - 1].length; i++){
                var tempData = seriesData[seriesIndex - 1][i];
                if(tempData[1] == val){
                    break;
                }
            }
            pointVal = seriesData[seriesIndex - 2][i];
            result = val + "("+ parseFloat(val/pointVal[1] * 100).toFixed(1) + "%)";
        }
        else{
            result = val;
        }
        return result; 
    };

    $.jqplot.preDrawSeriesHooks.push(storeSeriesData);

    var plot1 = $.jqplot('chart1', [s1, s2], {
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 15,
                barWidth: 25
            },
            pointLabels: { 
                show:true, 
                formatString: "%#.1f",  
                formatter: $.jqplot.LabelFormatter
            }
        },
        grid: {
            drawBorder: true,
            background: '#ffffff'  
        },
        axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                markSize: 4
            }
        },
        axes: {         
            xaxis: {
                pad: -1.05,
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                tickOptions: {
                    showGridline: true
                }
            },
            yaxis: {
                pad: 1.05,
                tickOptions: {
                    formatString: '%d',
                    showGridline: true
                }
            }
        }
    });
});

$（文档）.ready（函数（）{
VarS1=[10,20,30,40,50,60,70,80,90,100]；
VarS2=[5,15,15,30,45,60,35,49,75,95]；
var ticks=[1,2,3,4,5,6,7,8,9,10]；
var seriesData=[]，seriesIndex=0；
函数storeSeriesData（）{
seriesData[seriesIndex]=此.data；
seriesIndex=seriesIndex+1；
}
$.jqplot.LabelFormatter=函数（格式，val）{
var结果，pointVal=-1；
如果（序列索引>1）{
对于（var i=0；i

以下是解决问题的方法：

这是解决您问题的代码，请对此代码进行更改或抓住重要部分并将其放入您的代码中

$(document).ready(function () {
    var s1 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    var s2 = [5, 15, 15, 30, 45, 60, 35, 49, 75, 95];
    var ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var seriesData = [], seriesIndex = 0;

    function storeSeriesData(){
        seriesData[seriesIndex] = this.data;
        seriesIndex = seriesIndex + 1;
    }

    $.jqplot.LabelFormatter = function(format, val){ 
        var result, pointVal = -1;
        if(seriesIndex > 1){
            for(var i = 0; i < seriesData[seriesIndex - 1].length; i++){
                var tempData = seriesData[seriesIndex - 1][i];
                if(tempData[1] == val){
                    break;
                }
            }
            pointVal = seriesData[seriesIndex - 2][i];
            result = val + "("+ parseFloat(val/pointVal[1] * 100).toFixed(1) + "%)";
        }
        else{
            result = val;
        }
        return result; 
    };

    $.jqplot.preDrawSeriesHooks.push(storeSeriesData);

    var plot1 = $.jqplot('chart1', [s1, s2], {
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 15,
                barWidth: 25
            },
            pointLabels: { 
                show:true, 
                formatString: "%#.1f",  
                formatter: $.jqplot.LabelFormatter
            }
        },
        grid: {
            drawBorder: true,
            background: '#ffffff'  
        },
        axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                markSize: 4
            }
        },
        axes: {         
            xaxis: {
                pad: -1.05,
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                tickOptions: {
                    showGridline: true
                }
            },
            yaxis: {
                pad: 1.05,
                tickOptions: {
                    formatString: '%d',
                    showGridline: true
                }
            }
        }
    });
});

$（文档）.ready（函数（）{
VarS1=[10,20,30,40,50,60,70,80,90,100]；
VarS2=[5,15,15,30,45,60,35,49,75,95]；
var ticks=[1,2,3,4,5,6,7,8,9,10]；
var seriesData=[]，seriesIndex=0；
函数storeSeriesData（）{
seriesData[seriesIndex]=此.data；
seriesIndex=seriesIndex+1；
}
$.jqplot.LabelFormatter=函数（格式，val）{
var结果，pointVal=-1；
如果（序列索引>1）{
对于（var i=0；i

谢谢。我在if（tempData[1]==val）中发现了一个问题。如果val在停止该值之前满足相同的值，则i的值将是之前满足相同值的索引。所以pointVal将分别为其他值。谢谢。我在if（tempData[1]==val）中发现了一个问题。如果val在停止该值之前满足相同的值，则i的值将是之前满足相同值的索引。因此，pointVal将分别是另一个值。