jqplot - 如何绘制条形图

时间:2013-04-11 10:14:23

标签: jquery charts jqplot

我下载了jqplot并将其集成到我的网站中。一切正常。但我绘制条形图时遇到问题。它只显示折线图..

$.jqplot.config.enablePlugins = true;
var s1 = [[1,male], [2,female], [3,other]];
var ticks = ['Male', 'Female', 'Other'];

plot1 = $.jqplot('chart1', [s1], {
    // 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
        }
    },
    highlighter: {
        show: true
    }
});

我的结果是(中间的) - 但我想要一个条形图。 enter image description here

2 个答案:

答案 0 :(得分:1)

不要忘记包含barRenderer插件:

<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.min.js"></script>

(在他的缩小版或完整版中。)

答案 1 :(得分:0)

请参阅此处了解演示

FIDDLE

在标题

中加入jqplot.barRenderer插件

更改以下代码

$(document).ready(function(){
 var s1 = [[1,'male'], [2,'female'], [3,'other']];
var ticks = ['Male', 'Female', 'Other'];

plot1 = $.jqplot('chart1', [s1], {
    // Only animate if we're not using excanvas (not in IE 7 or IE 8)..

    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        pointLabels: {
            show: true
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
         yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer

        }
    },
    highlighter: {
        show: true
    }


  });
      });