在 highstock 图表中动态设置刻度间隔答案

【问题标题】：Setting tick interval dynamically in highstock chart在 highstock 图表中动态设置刻度间隔
【发布时间】：2013-08-14 10:36:19
【问题描述】：

我在我的应用程序中使用 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);

【问题讨论】：

你试过用tickPositioner吗？ api.highcharts.com/highstock#xAxis.tickPositioner
感谢您的回答，但是如何使用 GWT Highcharts api 呢？
老实说我不熟悉 GWT

标签： javascript gwt highstock gwt-highcharts

【解决方案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;
    };
  }-*/;
}

【讨论】：