如何创建“频谱"使用 Vaadin 的图表 14+ [英] How to create a "spectrum" chart using Vaadin 14+

问题描述

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

Is there a way in Vaadin 14 (or higher) to create what's called a "spectra" chart? Essentially, it's 99% identical to a "scatter" chart, except that a line is drawn from the point all the way down to the x-axis (please see figures 1 and 2 below which more or looks like a correct spectra chart.). I created a "hack" to achieve these quasi spectrum charts in Vaadin using "line charts" and by adding two "fake" points of intensity 0 to the left and to the right of my immediate point (as shown in code snippet below entitled "code snippet 1"). While my hack more-or-less works (pls see fig 1 image below), it causes a few problems: 1) it seems to make the lines appear more like bar-chart rectangles (please see fig 2) instead of points with narrow lines; 2) it seems to cause slight mistakes in the x-axis location. For example, in figure 2, the black line is to the left of the blue line; but in figure 3 (which is nothing more than the zoomed in perspective), it's to the right; and 3) it causes the x-axis to appear in the same color as the series, since my hack causes a line to appear to connect the fake right "0" of one point with the fake left "0" of the next point. (Plus, it means my chart has 3x the number of points than it needs to have, since I have two fake 0 points for every real point.)

代码片段 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 作为浏览器.

I'm using Vaadin 14.1.19 on Open jdk 11 and with Chrome on Chromebook as the browser.

推荐答案

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

I think it this case instead of using a Line type which is the default you'd benefit from using Column type. You can configure columns to be thin, configure zoomType and use axis configuration to get the extremes you want.

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);

结果如下:

并且放大后宽度保持不变:

And the width is kept after zooming in:

这篇关于如何创建“频谱"使用 Vaadin 的图表 14+的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！