【问题标题】:Jqplot - How to have vertical lines and make xaxis go up in plotted values?Jqplot - 如何有垂直线并使 xaxis 在绘图值中上升?
【发布时间】:2025-11-22 16:40:01
【问题描述】:

我已经使用 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/

【问题讨论】:

  • 这个不清楚,你能提供一个草图或更明确的东西吗?
  • 我添加了一个 js fiddle 例如我得到的。我需要 y 驴在 0, 25, 50, 75 100 ......我需要 x axix 是 3, 6, 9, 12, 15, 29, 36
  • 嗨,你有机会更新小提琴吗?在过去的 4 年里它没有幸存下来..... :(

标签: jquery jqplot


【解决方案1】:

这是一个 fork of you fiddle 用于坐标轴刻度值,使用:

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

文档的相关部分可以找到here

【讨论】:

  • 所以 15 和 29 之间的距离真的没有那么远
  • 更新了我的小提琴,你需要使用categoryAxisRenderer plugin
  • @Beginner,很高兴我能帮上忙;)
最近更新 更多