Question

我正在研究具有多个轴的GViz折线图。我的问题是我希望我的第二个轴从0开始到100结束。而它从它的实际数据值开始，即22 - 29。

到目前为止，我有这个：

enter image description here

做类似的事情：

vAxis: {
        viewWindowMode:'explicit',
        viewWindow:{
          max:22,
          min:1
        }
       }

适用于只有1个轴的折线图，但我希望这只发生在第二个轴上，第一个轴完全符合预期。

对于多轴我做了：

private Options createDafaultOptions() {
    Options options = Options.create();
    options.setWidth(800);
    options.setHeight(HpaSupportConstants.CHART_DEFAULT_HEIGHT_PX);
    options.setPointSize(HpaSupportConstants.CHART_DEFAULT_POINT_SIZE);
    return options;
  }

  private Options createSingleAxisLineChartOptions() {
    Options options = createDafaultOptions();
    AxisOptions axisOptions = AxisOptions.create();
    TextStyle textStyle = TextStyle.create();
    axisOptions.setTextStyle(textStyle);
    options.setColors(BLUE, ORANGE);
    options.setVAxisOptions(axisOptions);
    return options;
  }

  private Options createDoubleAxisLineChartOptions() {
    Options options = createDafaultOptions();
    ViewWindow viewWindow = ViewWindow.create(); //1
    viewWindow.setMin(0);                        //2
    viewWindow.setMax(100);                      //3
    AxisOptions rightAxis = AxisOptions.create();
    rightAxis.setViewWindowMode(ViewWindowMode.EXPLICIT); //4
    rightAxis.setViewWindow(viewWindow);                  //5 
    AxisOptions leftAxis = AxisOptions.create();
    options.setColors(BLUE, RED, ORANGE);
    setAxes(options, leftAxis, rightAxis);
    return options;
  }

  private native void setAxes(
    Options options, AxisOptions leftAxis, AxisOptions rightAxis)/*-{
    options.vAxes = [leftAxis, rightAxis];
    // Set the first series to default options, the second to use the right axis.
    options.series = [{}, {targetAxisIndex: 1}];
    options.vAxes = [{textStyle:{color: '#3366cc'}}, {textStyle:{color: '#dc3912'}}];
  }-*/;

[1,2,3,4,5使第二轴从0开始到100结束]

其他有用的链接：

Line Chart API Google code Playground

除了GViz，我还在使用GWT 2.5。

Answer 1

设置vAxes选项以控制多个y轴：

vAxes: {
    0: {
        // left axis options
    },
    1: {
        // right axis options
        viewWindow: {
            min: 0,
            max: 100
        }
    }
}

[编辑：我看到你已经这样做了]

这是你的问题。您可以在setAxes方法的第一行中正确设置轴选项：

options.vAxes = [leftAxis, rightAxis];

但随后在setAxes方法的最后一行覆盖它们：

options.vAxes = [{textStyle:{color: '#3366cc'}}, {textStyle:{color: '#dc3912'}}];

GViz具有多个轴的折线图

1 个答案: