jqPlot - 没有生成的巴特图

时间:2016-10-03 11:58:39

标签: javascript jqplot

我正在获得喜欢但不能生成图表的价值。下面是我的条形图的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的数组传递变量时生成图表。 而且图表仅在第1个刻度上生成。

1 个答案:

答案 0 :(得分:1)

尝试以下代码。由于您在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);
            });
});