更改 x 轴的刻度标签

Posted 2023-04-14

【中文标题】更改 x 轴的刻度标签

【英文标题】：Change the tick label of x axis

【发布时间】：2016-06-02 07:38:40

【问题描述】：

我希望 xaxis 上显示的刻度具有 y 轴的值（只应更改值，而不是位置）。下面是 JsFiddle

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

我希望在 x 轴刻度标签上显示 10、5（各自的 y 轴值），而不是 1、2 显示在 x 轴上。

我试过调试它，库中有一个类 jqplot-xaxis-tick 用于设置刻度值。

<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>

如果我可以以任何方式更改在库中显示值的逻辑，那么它将起作用。 或者有没有其他方法可以做到。

请帮忙

【参考方案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/

【讨论】：

您的解决方案非常适合我，谢谢。我也尝试执行以下操作 - var s1 = [['10', 1], ['5', 5]];，这也符合我的目的，但我想你的解决方案更合适。再次感谢