如何将图表多个 Y 轴设为零

Question

我正在使用 scichartJS

"scichart": "^1.4.1607"

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

Here is link to documentation on setting the visibleRange.

我正在这个函数中设置我的轴。

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);
    });

看起来像这样。

Answer 1

如果你想确保轴在SciChart.js中总是从零开始，你可以试试这个代码：

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

See How to Listen to VisibleRange changes

SciChart 中还有一个名为 axis.visibleRangeLimit 的 API，可用于将自动调整范围裁剪为最小值和最大值。例如这个：

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

不过我认为第一个 API 对你的情况会更好。

其次关于刻度的对齐方式，你可以使用这个API来定义轴标签的间距或间隔。

Axis Ticks - Gridline and Label Spacing (Interval)

yAxis.autoTicks = false; // Disable automatic tick calculation
yAxis.majorDelta = X; // set the spacing between major axis labels and gridlines
yAxis.minorDelta = Y; // set the spacing between minor axis gridlines

最后还有第三个更高级的 API，它提供了对轴标签输出、它们的间距和坐标的无限自定义。这个API被称为TickProvider。使用方法：

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

这使您可以 return 用于网格线和标签的确切数字。根据需要使用它来自定义 SciChart！

如何将图表多个 Y 轴设为零

How to atart chart multiple YAxis(s) to zero

javascript

reactjs

charts

scichart