使用 PrimeFaces V8 HorizontalBarChartModel、JSF 删除水平条形图中条形下方的轴

Question

如何使用 org.primefaces.model.charts.hbar.HorizontalBarChartModel 中的 HorizontalBarChartModel 删除水平条形图中条形下方的标尺（或轴）？

下面是我的方法，我还在这里添加了图表中我真正想要删除的红色圆圈部分。

  private void createComparativoPorTransportadora() {
    this.comparativoPorTransportadora = new HorizontalBarChartModel();

    ChartData data = new ChartData();

    HorizontalBarChartDataSet hbarDataSet = new HorizontalBarChartDataSet();
    hbarDataSet.setLabel("Entregas");

    List<Number> values = new ArrayList<>();


    for (int i = 11; i >= 0; i--) {
      values.add(65 - 3 + i);
  }
    
    hbarDataSet.setData(values);

    List<String> bgColor = new ArrayList<>();

    for (int i = 0; i < 12; i++) {
      bgColor.add("#008C00");
    }
    
    hbarDataSet.setBackgroundColor(bgColor);

    List<String> borderColor = new ArrayList<>();
 
    for (int i = 0; i < 12; i++) {
      borderColor.add("#008C00");
    }

    hbarDataSet.setBorderColor(borderColor);
    hbarDataSet.setBorderWidth(2);


    data.addChartDataSet(hbarDataSet);

    List<String> labels = new ArrayList<>();

  
    for (int i = 0; i < 12; i++) {
      if (i <= 9) {
        labels.add("TRANSPORTADORA  "+i);
      }
      if (i  >  9) {
        labels.add("TRANSPORTADORA "+i);
      }
      
    }

    data.setLabels(labels);
    this.comparativoPorTransportadora.setData(data);

    // Options
    BarChartOptions options = new BarChartOptions();
    CartesianScales cScales = new CartesianScales();
    CartesianLinearAxes linearAxes = new CartesianLinearAxes();

    CartesianLinearTicks ticks = new CartesianLinearTicks();
    ticks.setBeginAtZero(true);
    linearAxes.setTicks(ticks);

    cScales.addXAxesData(linearAxes);
    options.setScales(cScales);

    Legend legend = new Legend();
    legend.setDisplay(false);
    options.setLegend(legend);

    this.comparativoPorTransportadora.setOptions(options);

  }

Answer 1

您应该使用扩展器。检查本指南： https://www.chartjs.org/docs/latest/samples/scale-options/ticks.html

您正在寻找这部分

scales: {
      x: {
        ticks: {
          callback: function(val, index) {
            return index % 2 === 0 ? this.getLabelForValue(val) : '';
          },
          color: 'red',
        }
      }
    }

您想为 ''; 的每个值设置回调