Javascript 如何将多个Y轴标绘为零

我正在使用scichartJS

“scichart”：“^1.4.1607”

我需要让我的多个Y轴从零开始。而且标签也需要对齐。下面是一个不同图表的屏幕截图，可以正确地执行此操作

我正在该功能中设置轴

visibleRange ??
    const getYAxis = (x: YAxisData) =>
      new NumericAxis(wasmContext, {
        axisTitle: x.axisTitle,
        id: x.axisId,
        axisAlignment: setLocation(x),
        drawMinorTickLines: false,
        drawMajorTickLines: false,
        axisTitleStyle: {
          fontSize: 16,
          padding: Thickness.fromString('0 0 0 0'),
          color: theme.palette.grey['600'],
        },
      });

    yAxisData.forEach((x) => {
      const yAxis = getYAxis(x);
      yAxis.labelProvider.formatLabel = (dataValue) => {
        let value = formatNumberWithRounding(dataValue);
        if (value.includes(',')) value = `${value}k`;
        else value = `${Number(value).toFixed(2)}`;
        return value;
      };

      yAxis.drawMajorBands = false;
      yAxis.drawMinorGridLines = false;
      // yAxis.visibleRange = new NumberRange(5, 10);
      sciChartSurface.yAxes.add(yAxis);
    });

看起来像这样

---

如果要确保SciChart.js中的轴始终从零开始，可以尝试以下代码：

yAxis.visibleRangeChanged.subscribe(args => {
    if (args.visibleRange.min !== 0) {
        yAxis.visibleRange = new NumberRange(0, args.visibleRange.max);
    }
});

SciChart中还有一个名为的API，可用于将自动范围剪裁到最小值和最大值。e、 g.这：

// Ensure axis.visibleRange.min does not autorange outside 0
yAxis.visibleRangeLimit = new NumberRange(0, 99999999999); 

不过，我认为第一个API在您的情况下会工作得更好

其次，关于刻度对齐，可以使用此API定义轴标签的间距或间隔

最后还有第三个更高级的API，它提供了轴标签输出、间距和坐标的无限定制。此API称为。如何使用它：

yAxis.tickProvider.getMajorTicks = (minorDelta, majorDelta, visibleRange) => {
    // Force major gridlines and labels at these values always
    const outputTicks = [10,20,30,40,50];
    return outputTicks;
};
yAxis.tickProvider.getMinorTicks = (minorDelta, majorDelta, visibleRange) => {
    // Force minor gridlines at these values always
    const outputTicks = [5,15,25,35,45];
    return outputTicks;
};

---

这使您可以返回用于网格线和标签的确切数字。使用此选项可根据需要自定义SciChart

回答得好！非常感谢。

yAxis.tickProvider.getMajorTicks = (minorDelta, majorDelta, visibleRange) => {
    // Force major gridlines and labels at these values always
    const outputTicks = [10,20,30,40,50];
    return outputTicks;
};
yAxis.tickProvider.getMinorTicks = (minorDelta, majorDelta, visibleRange) => {
    // Force minor gridlines at these values always
    const outputTicks = [5,15,25,35,45];
    return outputTicks;
};