2

XY 折れ線グラフがあるので、マウスの左クリックで X 軸と Y 軸の両方のデータ視覚化を圧縮/展開し、押したまま左右と上下にドラッグします。

これがチャートの例です

ここに画像の説明を入力

サンプルデータをプロットするコードは次のとおりです

public class BaseXYChart extends Application {

@Override
public void start(Stage stage) {
   stage.setTitle("Linear plot");

   final CategoryAxis xAxis = new CategoryAxis();
   final NumberAxis yAxis = new NumberAxis(1, 22, 0.5);

   yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis){
        @Override
    public String toString(Number object){
        return String.format("%7.2f", object);
    }
});
final LineChart<String, Number>lineChart = new LineChart<String, Number>(xAxis, yAxis);

   lineChart.setCreateSymbols(false);
   lineChart.setAlternativeRowFillVisible(false);
   lineChart.setLegendVisible(false);

   XYChart.Series series1 = new XYChart.Series();

    series1.getData().add(new XYChart.Data("Jan", 1));
    series1.getData().add(new XYChart.Data("Feb", 1.5));
    series1.getData().add(new XYChart.Data("Mar", 2));
    series1.getData().add(new XYChart.Data("Apr", 2.5));
    series1.getData().add(new XYChart.Data("May", 3));
    series1.getData().add(new XYChart.Data("Jun", 4));
    series1.getData().add(new XYChart.Data("Jul", 6));
    series1.getData().add(new XYChart.Data("Aug", 9));
    series1.getData().add(new XYChart.Data("Sep", 12));
    series1.getData().add(new XYChart.Data("Oct", 15));
    series1.getData().add(new XYChart.Data("Nov", 20));
    series1.getData().add(new XYChart.Data("Dec", 22));

    BorderPane pane = new BorderPane();
    pane.setCenter(lineChart);          
    Scene scene = new Scene(pane, 800, 600);
    lineChart.getData().addAll(series1);

    stage.setScene(scene);
    stage.show();
}

public static void main(String[] args) {
    launch(args);
}   
}

どうすればこれを達成できますか? どこにも例が見つかりませんでした！

ありがとう。

画像を追加

マウスを左クリックし、押したまま Y 軸を上から下にドラッグした後の結果

マウスを左クリックし、押したまま Y 軸を上から下にドラッグした後の結果

左右のマウスドラッグで圧縮されたラインデータを取得するX軸についても同じ結果になるはずです

4

1 に答える 1

3

あなたの質問を正しく理解していれば、次のようなものを使用して、軸をクリックしてドラッグすることに基づいてチャートのサイズを変更できます。

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.event.EventHandler;
import javafx.scene.*;
import javafx.scene.chart.*;
import javafx.scene.effect.DropShadow;
import javafx.scene.effect.Effect;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class DraggableAxisResizableChart extends Application {
  private static final int UNDEFINED = -1;
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) {
    final NumberAxis xAxis = new NumberAxis();
    final NumberAxis yAxis = new NumberAxis();
    final LineChart<Number, Number> chart = new LineChart(
      xAxis, yAxis,
      FXCollections.observableArrayList(
         new XYChart.Series("April", FXCollections.observableArrayList(
           new XYChart.Data(0, 4), new XYChart.Data(1, 10), new XYChart.Data(2, 18), new XYChart.Data(3, 15)
         ))
      )      
    );
    chart.setPrefSize(400, 300);
    chart.setMaxSize(400, 300);
    makeXAxisDraggable(xAxis, chart);
    makeYAxisDraggable(yAxis, chart);

    StackPane layout = new StackPane();
    layout.getChildren().add(chart);
    stage.setScene(new Scene(layout, 800, 600));
    stage.show();
  }

  private void makeXAxisDraggable(final NumberAxis xAxis, final LineChart<Number, Number> chart) {
    final Delta d = new Delta();
    xAxis.setOnMouseDragged(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent event) {
        if (d.x == UNDEFINED) {
          d.x = event.getSceneX(); 
          d.y = event.getSceneY();
        } else { 
          chart.setMaxHeight(
            chart.getPrefHeight() * (
              (chart.getPrefHeight() + (event.getSceneY() - d.y) * 2) / chart.getPrefHeight()
            )
          );
        }  
      }
    });

    xAxis.setOnMouseReleased(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent event) {
        d.x = UNDEFINED; d.y = UNDEFINED;
        chart.setPrefSize(chart.getMaxWidth(), chart.getMaxHeight());
      }
    });

    addMouseoverGlow(xAxis);
  }

  private void makeYAxisDraggable(final NumberAxis yAxis, final LineChart<Number, Number> chart) {
    final Delta d = new Delta();
    yAxis.setOnMouseDragged(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent event) {
        if (d.x == -1) {
          d.x = event.getSceneX(); 
          d.y = event.getSceneY();
        } else { 
          chart.setMaxWidth(
            chart.getPrefWidth() * (
              (chart.getPrefWidth() - (event.getSceneX() - d.x) * 2) / chart.getPrefWidth()
            )
          );
        }  
      }
    });

    yAxis.setOnMouseReleased(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent event) {
        d.x = UNDEFINED; d.y = UNDEFINED;
        chart.setPrefSize(chart.getMaxWidth(), chart.getMaxHeight());
      }
    });

    addMouseoverGlow(yAxis);
  }

  // create a glow feedback effect on a node when the mouse is hovered over it.
  private void addMouseoverGlow(final Node n) {
    final Effect glow = new DropShadow(10, Color.GOLDENROD);
    n.setOnMouseEntered(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent event) {
        n.setEffect(glow);
      }
    });
    n.setOnMouseExited(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent event) {
        n.setEffect(null);
      }
    });
  }

  // records a relative point location.
  class Delta { double x = UNDEFINED, y = UNDEFINED; }
}

別の実装では、ノードでスケールを使用できます。

上記の実装では、グラフのサイズが変更されるとわずかなゴースト トレイルが残るため、例が役立つ場合は、何らかの方法で修正することをお勧めします。

于 2012-07-17T23:38:47.623 に答える