Jqplot - 如何绘制垂直线并使x轴在绘制值中上升?

时间:2012-12-07 16:36:02

标签: jquery jqplot

我使用jqplot绘制了折线图。

我想要的是垂直线,从3开始,沿着底部的绘图值上升。所以3,6,9,12,15,29,36 左边还有一个破折号标记。

这就是我现在所拥有的:

$(document).ready(function(){
    $.jqplot('chart2', [[[3, @(Model.LearnerWeek[0])], [6, @(Model.LearnerWeek[1])], [9, @(Model.LearnerWeek[2])],
                       [12, @(Model.LearnerWeek[3])], [15, @(Model.LearnerWeek[4])], [29, @(Model.LearnerWeek[5])], [36, @(Model.LearnerWeek[6])]],
                       [[3, @(Model.ManagerWeek[0])], [6, @(Model.ManagerWeek[1])], [9, @(Model.ManagerWeek[2])],
                       [12, @(Model.ManagerWeek[3])], [15, @(Model.ManagerWeek[4])], [29, @(Model.ManagerWeek[5])], [36, @(Model.ManagerWeek[6])]]],
        {
            axes: {
                yaxis: { tickOptions: { show: false}, min: 0, max: 100, label: 'Participation Rate', labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
                xaxis: { min: 3, max: 36, label: 'Week', tickOptions: { formatString: '%d' } }
            },
            seriesDefaults: {
                showMarker: false ,
                rendererOptions: {
                    diameter: undefined, // diameter of pie, auto computed by default.
                    padding: 10,        // padding between pie and neighboring legend or plot margin.
                    fill: true,         // render solid (filled) slices.
                    shadowOffset: 2,    // offset of the shadow from the chart.
                    shadowDepth: 15,     // Number of strokes to make when drawing shadow.  Each stroke
                    // offset by shadowOffset from the last.
                    shadowAlpha: 1   // Opacity of the shadow
                }
            },
            seriesColors: ['#3591cf', '#ef4058', '#73C774', '#C7754C', '#17BDB8']
    });
});

我玩过渲染选项和xasis,但似乎无法解决这个问题

编辑:

示例:

http://jsfiddle.net/uzi002/y4YKY/

1 个答案:

答案 0 :(得分:1)

以下是使用以下内容的fork of you fiddle轴刻度值:

axes: {
    yaxis: { numberTicks: 5, /* ...*/ }, 
    xaxis: { renderer:$.jqplot.CategoryAxisRenderer, rendererOptions:{sortMergedLabels:true}, /* ... */}
},

可以找到文档的部分内容here