vaadin - 如何使用 Vaadin 14+ 创建“频谱”图表

Question

Vaadin 14（或更高版本）有没有办法创建所谓的“光谱”图表？从本质上讲，它与“散点”图 99% 相同，只是从该点一直画到 x 轴（请参见下面的图 1 和图 2，其中更多或看起来像正确的光谱图。） . 我创建了一个“hack”来使用“折线图”在 Vaadin 中实现这些准频谱图，并在我的直接点的左侧和右侧添加两个强度为 0 的“假”点（如下面的代码片段所示，标题为“代码片段 1")。虽然我的 hack 或多或少有效（请参见下面的图 1 图像），但它会导致一些问题：1）它似乎使线条看起来更像条形图矩形（请参见图 2）而不是窄点线条；2）似乎在x轴位置上造成了轻微的错误。例如，在图 2 中，黑线在蓝线的左侧；但在图 3 中（只不过是放大的透视图），它在右边；和 3) 它导致 x 轴以与系列相同的颜色出现，因为我的 hack 导致出现一条线，将一个点的假右“0”与下一个点的假左“0”连接起来。（另外，这意味着我的图表的点数是它需要的点数的 3 倍，因为每个真实点都有两个假的 0 点。）因为我的 hack 导致出现一条线，将一个点的假右“0”与下一点的假左“0”连接起来。（另外，这意味着我的图表的点数是它需要的点数的 3 倍，因为每个真实点都有两个假的 0 点。）因为我的 hack 导致出现一条线，将一个点的假右“0”与下一点的假左“0”连接起来。（另外，这意味着我的图表的点数是它需要的点数的 3 倍，因为每个真实点都有两个假的 0 点。）

代码片段1：

   private void addTheSeries(DataSeries series, final float mz, final float intensity) {
        //14.1.19
        series.add(new DataSeriesItem(mz, 0));
        series.add(new DataSeriesItem(mz, intensity));
        series.add(new DataSeriesItem(mz, 0));
    }

图1：

图 2：

我在 Open jdk 11 上使用 Vaadin 14.1.19，并在 Chromebook 上使用 Chrome 作为浏览器。

Answer 1

我认为在这种情况下，而不是使用 Line 类型，这是您从使用 Column 类型中受益的默认值。您可以将列配置为细，配置 zoomType 并使用轴配置来获得您想要的极端。

Chart chart = new Chart(ChartType.COLUMN);

Configuration configuration = chart.getConfiguration();
configuration.setTitle("Spectrum example");

configuration.getChart().setZoomType(Dimension.XY);

DataSeries series = new DataSeries();
series.add(new DataSeriesItem(120, 5));
series.add(new DataSeriesItem(180, 50));
series.add(new DataSeriesItem(290, 350));
series.add(new DataSeriesItem(420, 500));
series.add(new DataSeriesItem(740, 450));

PlotOptionsColumn options = new PlotOptionsColumn();
options.setPointWidth(1);
series.setPlotOptions(options);

configuration.addSeries(series);
YAxis y = configuration.getyAxis();
y.setTitle("");

configuration.getLegend().setEnabled(false);
add(chart);

结果如下所示：

放大后保持宽度：