jqplot - 如何让轴刻度显示在柱形图之间的线上？

Question

这是我想要做的事情。 我的轴当前选项设置为：

  axes: {
  xaxis: {
    renderer: $.jqplot.CategoryAxisRenderer,
    ticks: xticks,  
  },
  yaxis: {
    min:0,
    tickOptions: {formatString: '%1.0f'}
  }
},

xticks是一个字符串数组。只有在不使用渲染器和自定义刻度线的情况下，我才能使它正常工作，但我想使用我自己指定的刻度线。

感谢您的帮助！

- phz

Answer 1

一种方法（我认为不是很好的方法）是使用CSS。 您可以通过jqplot-xaxis将x轴块向左移动：

.jqplot-xaxis{
     left: -15px;
}

如果有更好的方法来完成它（使用ticks选项），我很想听听你的建议。

- AnthonyLeGovic

---

我已经尝试过了，但不幸的是我的图表必须以不同的尺寸显示，所以这种方法行不通。无论如何还是谢谢。 - phz

Answer 2

与其与CategoryAxisRenderer斗争，不如使用默认的数字轴：

var chartData = [[1.5, 2.61], [2.5, 5.00], [3.5, 6.00]];

var plot2 = $.jqplot('chart1', [chartData], {
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: {barWidth: 50}
    },
    axes: {
        xaxis: {
            ticks: [[0,"Midnight"],[1,"1 AM"],[2,"2 AM"],[3,"3 AM"],[4,"4 AM"]]
        },
        yaxis: {

        }
    }
});

生成：

请在这里试验代码。

- Mark

---

嗯，这个可以，我看到你是把条形图放在点之间。 - phz

我的意思是，如果您不使用categoryaxisrenderer，则默认情况下条形图会出现在线上，因此您需要使用2D数组“[[1.5, 2.61]，[2.5, 5.00]，[3.5, 6.00]]”手动将它们移动。最终我改用了折线图，但还是非常感谢您的帮助。已接受。 - phz