更改x軸的刻度標簽

Question

我希望在xaxis上顯示的刻度線具有y軸的值（僅應更改值，而不應更改位置）。 以下是JsFiddle

https://jsfiddle.net/sonal215/337afs1h/1/

我希望在x軸刻度標簽上顯示10、5（相應的y軸值），而不是在x軸上顯示1、2。

我嘗試調試它，庫中有一個類jqplot-xaxis-tick設置了ticks值。

<div class="jqplot-axis jqplot-xaxis" style="position: absolute; width: 180px; height: 18px; left: 0px; bottom: 0px;"><div class="jqplot-xaxis-tick" style="position: absolute; left: 47px;">1</div><div class="jqplot-xaxis-tick" style="position: absolute; left: 127px;">2</div></div>

如果我能以任何方式更改在庫中顯示值的邏輯，那么它將起作用。 還是有其他方法可以做到這一點。

請幫忙

Answer 1

創建jqplot-xaxis-tick div后，您可以對其進行操作，並從s1數據數組為它們分配y值。

$(document).ready(function() {
  var s1 = [
    [1, 10],
    [2, 5]
  ];
  plot1 = $.jqplot('chart1', [s1], {
    seriesColors: ["#EB2300", "#FFCC00"],
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: {
        varyBarColor: true,
        barWidth: 30,
        barMargin: -30
      },
      pointLabels: {
        show: true
      }
    },
    grid: {
      drawBorder: false
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer
      },
      yaxis: {
        tickOptions: {
          show: false
        },
        rendererOptions: {
          drawBaseline: false
        }
      }
    }
  });
 //assign x values with y values//
 $('.jqplot-xaxis-tick').each(function(i,elem) {
        $(this).text(s1[i][1]);
    });
});

在您的小提琴中查看一個有效的示例：

https://jsfiddle.net/337afs1h/2/