如何在jqplot中实现单Y轴处于双X轴之间？附示例代码

要实现你想要的效果（条形/块位于两个时间刻度之间，比如对应9:00到10:00的数值显示在这两个刻度中间），我们需要调整数据结构和jqPlot的渲染配置，主要涉及X轴时间刻度的定位和条形/块的偏移设置，以下是具体的解决方案：

核心思路 #

你的需求本质是让每个数据点对应一个时间区间（而非单个时间点），因此需要：

• 调整X轴刻度的显示位置，让刻度对应区间的起止点
• 配置条形/块渲染器，将图形绘制在两个相邻刻度的中间位置

修改后的完整代码 #

var data = [
  // 注：X值为区间起始时间，后续通过配置让条形落在区间中间
  ['2008-06-29 7:00', 3],
  ['2008-06-29 8:00', 2],
  ['2008-06-29 9:00', 5],
  ['2008-06-29 10:00', 0],   // 补充缺失时间点，保证区间连续性
  ['2008-06-29 11:00', 20],
  ['2008-06-29 12:00', 70],
  ['2008-06-29 13:00', 90],
  ['2008-06-29 14:00', 100],
  ['2008-06-29 15:00', 300],
  ['2008-06-29 16:00', 70],
  ['2008-06-29 17:00', 10],
  ['2008-06-29 18:00', 9],
  ['2008-06-29 19:00', 10],
  ['2008-06-29 20:00', 20],
  ['2008-06-30 7:00', 12],
  ['2008-06-30 8:00', 30],
  ['2008-06-30 9:00', 6],
  ['2008-06-30 10:00', 12],
  ['2008-06-30 11:00', 90],
  ['2008-06-30 12:00', 5],
  ['2008-06-30 13:00', 5]
];

var linetitle = ["fisrtLine"];
var chartTitle = "wodetubiao";
var x_label = "时间区间";
var y_label = "数值";
var y_max = 300;

var jqplotchart = { jqplot: {} };

jqplotchart.jqplot.diagram = {
  base: function(document, data, linetitle, chartTitle, x_label, y_label, y_max, type) {
    var renderer;
    if (type == 1) {
      renderer = $.jqplot.BlockRenderer;
    } else if (type == 2) {
      renderer = $.jqplot.BarRenderer;
    } else {
      alert("无效的图表类型");
      return;
    }

    var plot1 = $.jqplot(document, [data], {
      title: chartTitle,
      legend: {
        show: true,
        labels: linetitle,
        placement: 'outsideGrid'
      },
      animate: true,
      seriesDefaults: {
        renderer: renderer,
        rendererOptions: {
          barWidth: 3600000 * 0.8, // 宽度设为1小时区间的80%（3600000为1小时毫秒数）
          barOffset: 1800000,      // 偏移半小时，让条形落在两个时间点中间（BarRenderer用）
          blockOffset: 1800000     // 偏移半小时，让块落在两个时间点中间（BlockRenderer用）
        },
        pointLabels: { show: true }
      },
      axes: {
        xaxis: {
          renderer: $.jqplot.DateAxisRenderer,
          rendererOptions: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer
          },
          tickOptions: {
            formatString: '%R',
            angle: -30
          },
          label: x_label || "",
          tickInterval: "1 hour", // 每小时显示一个刻度
          min: data[0][0],        // 固定X轴起始时间
          max: data[data.length-1][0] // 固定X轴结束时间
        },
        yaxis: {
          label: y_label || "",
          min: 0,
          max: y_max
        }
      },
      series: [{ lineWidth: 3, color: '#5FAB78' }],
      cursor: { show: true, followMouse: true },
      highlighter: { show: true, sizeAdjust: 10 }
    });
  }
};

// 渲染块图和条形图
jqplotchart.jqplot.diagram.base("chart1", data, linetitle, chartTitle, x_label, y_label, y_max, 1);
jqplotchart.jqplot.diagram.base("chart2", data, linetitle, "wodezhuzhuangtu", x_label, y_label, y_max, 2);

关键修改点说明 #

1. 数据补全：

   • 补充了缺失的时间点（比如2008-06-29 10:00），确保X轴的时间区间连续，让每个条形能对应明确的时间段。

2. 渲染器偏移配置：

   • 针对BarRenderer设置barOffset: 1800000（半小时的毫秒数），针对BlockRenderer设置blockOffset: 1800000，让条形/块从时间点偏移半小时，刚好落在两个相邻小时刻度的中间。
   • barWidth设置为3600000 * 0.8，即小时区间的80%，避免条形之间重叠。

3. X轴刻度优化：

   • 明确设置tickInterval: "1 hour"，确保每小时显示一个时间刻度。
   • 用min和max固定X轴的起止范围，避免自动缩放导致的刻度错位。

4. 参数简化：

   • 移除了冗余的x_ticks变量，让DateAxisRenderer自动生成刻度，更符合时间序列的展示逻辑。

这样调整后，你的图表就能实现Y轴（条形/块）位于两个X轴时间刻度之间的效果，完美匹配你想要的样式。

内容的提问来源于stack exchange，提问作者Meika Han