在highstock图表中动态设置滴答间隔

Question

我在我的应用程序中使用GWT Highcharts api。 它的外观如下：

正如您所看到的，x轴上的列和标签之间存在小的偏移。 为了解决这个问题，我编写了以下代码：

chart.getXAxis().setTickInterval(7 * 24 * 3600 * 1000);

没有移位，但在此之后x轴的缩放机构不起作用，并且x轴上有一年中每周的标签（下面的屏幕截图）。当时间段很长时，它看起来不可读。因此，即使设置了滴答间隔，我也希望x轴变焦机制能够工作。

我尝试通过添加AxisSetExtremesEventHandler（下面的代码）修复它，但它没有帮助。 谢谢！

chart = new StockChart();
    chart.getXAxis().setTickInterval(7 * 24 * 3600 * 1000);
    chart.setOption("/plotOptions/column/stacking", "normal");
    chart.getNavigator().setEnabled(true);
    DateTimeLabelFormats dateFormat = new DateTimeLabelFormats().setWeek("%e. %b").setYear("%Y");
    chart.getNavigator().getXAxis().setDateTimeLabelFormats(dateFormat);

    chart.getXAxis().setAxisSetExtremesEventHandler(new AxisSetExtremesEventHandler() {

      @Override
      public boolean onSetExtremes(AxisSetExtremesEvent axisSetExtremesEvent) {
        long week = 7 * 24 * 3600 * 1000;
        double max = axisSetExtremesEvent.getMax().doubleValue();
        double min = 0;
        try {
          min = axisSetExtremesEvent.getMin().doubleValue();
        } catch (Exception e) {
          min = axisSetExtremesEvent.getAxis().getExtremes().getDataMin().doubleValue();
          System.out.println(e.getLocalizedMessage());
        }
        double delta = max - min;
        if (delta >= 52 * week) {
          chart.getXAxis().setTickInterval(12 * week);
        } else if (delta >= 26 * week) {
          chart.getXAxis().setTickInterval(4 * week);
        } else {
          chart.getXAxis().setTickInterval(week);
        }
        chart.redraw();
        return true;
      }
    });

    chart.getXAxis().setType(Axis.Type.DATE_TIME).setDateTimeLabelFormats(dateFormat);
    String currentYearWeek = convertToYearWeek(getTimestampFromDate(null));
    chart.setChartTitleText("Historical chart");
    chart.setSize("auto", "100%");

    XAxisLabels xLabel = new XAxisLabels().setColor("#555555").setRotation(-90)
        .setAlign(Align.RIGHT).setY(10).setFormatter(new AxisLabelsFormatter() {
          @Override
          public String format(AxisLabelsData axisLabelsData) {
            String yw = convertToYearWeek(String.valueOf(axisLabelsData.getValueAsLong()));
            return yw;
          }
        });
    chart.getXAxis().setLabels(xLabel);

Answer 1

最后我找到了解决方案： ...

chart.getXAxis().setOption("tickPositioner", NativeHelper.getTickPositioner());

...

public class NativeHelper {
public static native JavaScriptObject getTickPositioner() /*-{
    return function(min, max) {
        var pos, week = 7 * 24 * 3600 * 1000, delta = max - min, shift, tickPositions = [];
        if (delta >= 52 * week) {
            shift = 5 * week;
        } else if (delta >= 26 * week) {
            shift = 2 * week;
        } else {
            shift = week;
        }
        roundedMin = Math.floor(min / shift) * shift;
        var minYearWeek = @com.project.NativeHelper::convertToYearWeek(Ljava/lang/String;)(roundedMin +"");
        roundedMin = parseInt(@com.project.NativeHelper::getTimestampFromDate(Ljava/lang/String;)(minYearWeek));
        pos = roundedMin;
        var lastPosition;
        while (pos <= max) {
            tickPositions.push(pos);
            pos += shift;
            if (pos === lastPosition) {
                break;
            }
            lastPosition = pos;
        }
        return tickPositions;
    };
  }-*/;
}