jQplot统计

时间:2013-02-04 07:31:10

标签: javascript jquery jqplot

我有一个jQplot图表,我需要将month标签(Jan,Feb,Mar,Apr,May,Jun,Jul,...)放到我的X轴上。

我尝试了教程中的一些示例,但它们不起作用。

有人能帮助我吗?


这是我到目前为止所做的:

jQuery(document).ready(function(){
    jQuery.plot(jQuery("#chartplace2"), [{
        data : [[6, '0'], [5, '0'], [4, '0'], [3, '0'], [2, '0'], [1, '0'], [0, '32000']],
        label : "Mijolino",
        color : "#79755c"
    }, {
        data : [[6, '0'], [5, '0'], [4, '0'], [3, '0'], [2, '0'], [1, '0'], [0, '42500']],
        label : "Mija",
        color : "#78d6d0"
    }], {
        series : {
            lines : {
                show: true,
                fill : true,
                fillColor : {
                    colors : [{
                        opacity : 0.1
                    }, {
                        opacity : 0.20
                    }]
                }
            },
            points: {
                show : true
            }
        },
        legend: {
            position : 'nw'
        },
        grid: {
            hoverable : true,
            clickable : true,
            borderColor : '#ccc',
            borderWidth : 1,
            labelMargin : 10
        },
        yaxis : {
            min : 0,
            max : 100000
        },
        title : {
            text : 'Grafikon',
            show : true
        }
    });
});

2 个答案:

答案 0 :(得分:0)

尝试这样的事情:

http://jsfiddle.net/pabloker/GsDMW/3/

var Mijolino = [['01/01/2013', '0'], ['02/01/2013', '0'], ['03/01/2013', '0'],   ['04/01/2013', '0'], ['05/01/2013', '0'], ['06/01/2013', '0'], ['07/01/2013', '32000']];
var Mija = [['01/01/2013', '0'], ['02/01/2013', '0'], ['03/01/2013', '0'], ['04/01/2013', '0'], ['05/01/2013', '0'], ['06/01/2013', '0'], ['07/01/2013', '42500']];;

var plot1 = $.jqplot("chartplace2",
[Mijolino,Mija], {
seriesDefaults: {
lines: { 
    show: true, 
    fill: true
},
points: { 
    show: true 
}
},
legend: { 
   position: 'nw'
},
grid: { 
   hoverable: true, 
   clickable: true, 
   borderColor: '#ccc', 
   borderWidth: 1, 
   labelMargin: 10 
},
axes:{
    xaxis: { 
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions:{formatString:'%Y-%b'},
        min: '01/01/2013'
    },
    yaxis: {
     min:0,
     max:50000
    }
},

title: { 
text: 'Grafikon', 
show: true}
});

答案 1 :(得分:0)

见这个

JSFIDDLE DEMO

HTML

<div id="chartplace2" style="height: 300px; width: 650px; position: relative;" class="jqplot-target">

JQUERY

var Mijolino = [['01/01/2013', '0'], ['02/01/2013', '0'], ['03/01/2013', '0'], ['04/01/2013', '0'], ['05/01/2013', '0'], ['06/01/2013', '0'], ['07/01/2013', '32000']];
var Mija = [['01/01/2013', '0'], ['02/01/2013', '0'], ['03/01/2013', '0'], ['04/01/2013', '0'], ['05/01/2013', '0'], ['06/01/2013', '0'], ['07/01/2013', '42500']];;

var plot1 = $.jqplot("chartplace2",
[Mijolino,Mija], {

  seriesDefaults: {

    lines: { 
        show: true, 
        fill: true
    },
    points: { 
        show: true 
    }
  },
   legend: { 
       position: 'nw',
       renderer: $.jqplot.EnhancedLegendRenderer,
    show:true
   },
   grid: { 
       hoverable: true, 
       clickable: true, 
       borderColor: '#ccc', 
       borderWidth: 1, 
       labelMargin: 10 
   },

    axes:{
        xaxis: { 
            renderer:$.jqplot.DateAxisRenderer        

        },
        yaxis: {
         min:0,
         max:50000
        }
    },

title: { 
    text: 'Grafikon', 
    show: true},
   seriesColors: [ "#D85252", "#F6BD0F"],
    series:[
    {
    label: "Mijolino",
    },
    {
    label: "Mija",
        }   
    ],
    highlighter: { show: false }
});