jqPlot - 巴特图不生成

jqPlot - bart chart not generating

我得到了点赞的价值,但无法生成图表。下面是我的 javascript 条形图代码。

$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;

        var s1=${likes};
        var s2=[30000000];
        var s3 =[42000000];

      var z=[s1,s2,s3];
         var ticks = ['Your Organisation','Competitor#1','Cometitor#2'];
        plot1 = $.jqplot('chart1', [z], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
           axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                },
                 yaxis: {
                                        min:0,
                                        max:10000000000,
                     tickOptions: {formatString: '%d'},
                    ticks:[0,10000000,20000000,30000000,40000000,50000000]
                                    }
            }, 
            highlighter: { show: false }
        });

     $('#chart1').bind('jqplotDataClick', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        );
        }); 

图表是在我直接传递变量而不是通过变量 z 数组传递时生成的。 而且图表仅在第一个报价单生成。

试试下面的代码。由于您正在呈现一个列表,因此在 var s1 中您将获得一个值列表。您必须取第一个值。

$(document).ready(function() {
    $.jqplot.config.enablePlugins = true;

    var s1 = ${likes[0]}; //first vaue from the list
    var s2 = [30000000];
    var s3 = [42000000];

    var z = [s1,s2,s3];
    var ticks = ['Your Organisation', 'Competitor#1', 'Cometitor#2'];
    plot1 = $.jqplot('chart1', [z], {
        // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
        animate: !$.jqplot.use_excanvas,
        seriesDefaults: {
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
            yaxis: {
                min:0,
                max:10000000000,
                tickOptions: {formatString: '%d'},
                ticks:[0,10000000,20000000,30000000,40000000,50000000]
            }
        }, 
        highlighter: { show: false }
    });

    $('#chart1').bind('jqplotDataClick', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            });
});