折线图符号位于轴上时被轴剪裁答案

【问题标题】：Line chart symbols clipped by axis when they lie on the axis折线图符号位于轴上时被轴剪裁
【发布时间】：2015-07-18 17:14:59
【问题描述】：

我有一个带有定义轴范围的折线图，并且正在绘制点作为位于轴上的线的一部分。默认情况下，位于轴上的点和线段被剪裁，如下面的屏幕截图所示；

我的代码如下；

package com.jtech;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.Axis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.input.MouseEvent;
import javafx.stage.Stage;

public class ShowSymbol extends Application {

    @Override
    public void start(Stage stage) {
        final NumberAxis xAxis = new NumberAxis(0,4,1);
        final NumberAxis yAxis = new NumberAxis(0,10,2);

        final LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);
        XYChart.Series series = new XYChart.Series();

    final XYChart.Data d1 = new XYChart.Data(0.0, 0.0);
    final XYChart.Data d2 = new XYChart.Data(0.5, 2.0);
    final XYChart.Data d3 = new XYChart.Data(1.0, 2.5);
    final XYChart.Data d4 = new XYChart.Data(1.5, 3.5);
    final XYChart.Data d5 = new XYChart.Data(2.0, 10.0);
    final XYChart.Data d6 = new XYChart.Data(2.5, 10.0);
    final XYChart.Data d7 = new XYChart.Data(3.0, 0.0);
    final XYChart.Data d8 = new XYChart.Data(3.5, 0.0);
    final XYChart.Data d9 = new XYChart.Data(4.0, 8.0);

        series.getData().addAll(d1,d2,d3,d4,d5,d6,d7,d8,d9);
        lineChart.getData().add(series);
        lineChart.setLegendVisible(false);

        final Scene scene = new Scene(lineChart, 400, 300);
        scene.getStylesheets().add(getClass().getResource("/css/show.css").toExternalForm());

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


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

样式表包含的位置；

.chart-series-line { -fx-stroke: grey; -fx-stroke-width: 4.0px; -fx-effect: null; }

.chart-line-symbol {
     -fx-background-color: #860061, white;
     -fx-background-insets: 0, 2;
     -fx-background-radius: 0;
     -fx-padding: 4px;
 }

我想保持指定的轴范围（0->4 和 0->10），但显示符号和线的完整段。这可能吗？

【问题讨论】：

为什么不简单地使用new NumberAxis(0,4.2,1) 和new NumberAxis(0,10.2,2)？
@RealSkeptic 该问题与零轴更相关，即参见示例中原点上绘制的点。例如，如果我使用 new NumberAxis(-0.2,4.2,1)，刻度线将从 -0.2 开始，并且图表看起来很丑。 AFAIK 没有将范围设置为从 -0.2 开始的机制，但第一个刻度线为 0，这是我想要的。

标签： java charts javafx

【解决方案1】：

您面临的问题是绘图区域被裁剪。来自 XYChart.java 的代码摘录：

private final Group plotArea = new Group(){
  @Override public void requestLayout() {} // suppress layout requests
};
private final Group plotContent = new Group();
private final Rectangle plotAreaClip = new Rectangle();

public XYChart(Axis<X> xAxis, Axis<Y> yAxis) {
...
getChartChildren().addAll(plotBackground,plotArea,xAxis,yAxis);
...
plotArea.setClip(plotAreaClip);
...
}

解决方案可能是简单地禁用剪辑。但这很可能会给您带来其他麻烦（线重叠等）。尽管如此，由于没有合适的 API，所以这里有一个关于如何禁用剪辑的快速而肮脏的方法：

Region chartContent = (Region) lineChart.lookup(".chart-content");
for( Node node: chartContent.getChildrenUnmodifiable()) {
    if( node instanceof Group) {
        Group plotArea= (Group) node;
        plotArea.setClip(null);
    }
}

然后它看起来像这样：

底线：最好实现支持此功能的自己的图表（例如，使用和更改 LineChart 和 XYChart 的来源）。或者您 file a change request 寻求适当的解决方案。

【讨论】：