How to create a “spectrum” chart using Vaadin 14+

问题

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

Code snippet 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));
    }

Figure 1:

Figure 2:

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

回答1:

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

Result looks like this:

And the width is kept after zooming in:

来源：https://stackoverflow.com/questions/62760759/how-to-create-a-spectrum-chart-using-vaadin-14