1

我正在将 jqPlot 用于条形图,并且我想将 x 轴显示为图例。

附上截图...

在此处输入图像描述

代码:

var s1 = [2.5, 6.3, 7.4, 10]; 
var ticks = ['a', 'b', 'c', 'd']; 
plot2 = $.jqplot('chart2', [s1], { 
seriesDefaults: { 
     renderer:$.jqplot.BarRenderer, rendererOptions:{ varyBarColor : true }, 
     pointLabels: { show: true }, showLabel: true,   }, 
     series: [ {label: 'Cups'}, {label: 'Dishes'}, ], 
     legend: { show: true, placement: 'outside', //rendererOptions: {numberColumns: 2}   }, 
     axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks }, 
             yaxis:{  tickOptions:{ formatString:'%.2f%' } } }
4

1 回答 1

3

以下是如何执行此操作的示例:

var s1 = [2.5, 6.3, 7.4, 10]; 
var ticks = ['a', 'b', 'c', 'd']; 
plot2 = $.jqplot('chart1', [s1,[],[],[]], { //give it extra blank series
seriesDefaults: { 
       renderer: $.jqplot.BarRenderer, 
       rendererOptions: { varyBarColor : true }, 
       pointLabels: { show: true }, 
       showLabel: true
     }, 
     series: [ {}, 
               {renderer: $.jqplot.LineRenderer}, // set our empty series to the lineRenderer, so the bar plot isn't padded for room
               {renderer: $.jqplot.LineRenderer},
               {renderer: $.jqplot.LineRenderer} ], 
     legend: { show: true, placement: 'outside', labels: ticks},  // give the legend the tick labels
     axes:   { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, ticks: ticks }}, 
     yaxis:  {  tickOptions:{ formatString:'%.2f%' } }
});

产生:

在此处输入图像描述

于 2013-01-24T18:05:15.443 回答