chartjs(java)在不删除xaxis上的标签的情况下，我可以只删除线性图表的特定网格线吗？

hyrbngr7 于 2021-08-25 发布在 Java

关注(0)|答案(1)|浏览(385)

我对com.byteowls.vaadin.chartjs chartjs有以下问题-我不知道如何在不删除标签的情况下有条件地删除网格线。以下是我创建chartjs的代码：`

BarChartOptions options = barChartConfig.options();
        options.title().text(title).display(true);
        options.legend().position(Position.RIGHT);
        options.tooltips().mode(InteractionMode.X);
        options.legend().labels().boxWidth(10).fontSize(10);
        options.tooltips().position(Tooltips.PositionMode.NEAREST);

    LinearScale yScale = new LinearScale();
    yScale.stacked(true);
    yScale.ticks().beginAtZero(true);
    options.scales().add(Axis.Y, yScale);
    DefaultScale xScale = new DefaultScale();
    xScale.stacked(true);

    xScale.ticks().autoSkip(false).callback("function(value,index,values){\n" +
            "if(index % 2 !== 0){\n" +
            "    return undefined;\n" +
            "\n" +
            "} \n" +
            "return value;\n" +
            "\n" +
            "}");
    xScale.gridLines().lineWidth(1).color("rgb(0,0,0)");
    options.scales().add(Axis.X, xScale);

    ChartJs horizontalStackedChart = new ChartJs(barChartConfig);
    horizontalStackedChart.setHeight(70, Sizeable.Unit.PERCENTAGE);
    horizontalStackedChart.setWidthFull();
    return horizontalStackedChart;`

这是图片：图表图片1
这是我想要的图像，但是上面图表中的标签是：图表图像2
后来我在互联网上发现有一个回调函数，用于滴答声的方法很多，但没有人帮助。我想在两个数据集后显示网格线，它在“图表图像2”中的外观，但标签不见了。我不明白为什么会这样。实际上可能吗？提前感谢您的帮助！

Java charts vaadin chart.js

来源：https://stackoverflow.com/questions/68287020/chartjsjava-can-i-remove-only-specific-gridlines-for-a-linear-chart-withouth-r

1条答案

按热度按时间

iqxoj9l91#

您可以将xaxis网格线的linecolor设置为一个函数，在该函数中，您可以将要删除的所需线条设置为完全不透明的颜色。
例子：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'red'
    }]
  },
  options: {
    scales: {
      x: {
        grid: {
          color: (ctx) => (ctx.index % 2 === 0 ? 'rgba(0,0,0,0)' : 'red')
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>

赞(0）回复(0）举报 2021-08-25

我来回答

chartjs(java)在不删除xaxis上的标签的情况下，我可以只删除线性图表的特定网格线吗？

1条答案

相关问题

热门标签

最新问答