0

過去 3 時間、vaadin で invient-charts アドオンを使用して単純な円グラフを作成しようと試みてきました。私はそれについてたくさん読んで、jquery.jsとhighcharts.jsをwebcontentファイルに入れました。アプリケーション サーブレットを参照するように xml ファイルを変更しました。しかし、それでもうまくいきません。私もこれらのことを間違っていると思います。それは今私を夢中にさせています。円グラフやその他のグラフの例を作成するための簡単なチュートリアルを教えてもらえますか?

4

1 に答える 1

1

あなたは多くの情報を提供しなかったので、私が取った手順をここに投稿します...

まず、jquery と highcharts の JavaScript ファイルを webapp/js フォルダーに追加します。

ここで、アプリケーション サーブレット (AbstractApplicationServlet を拡張するもの) を編集します...writeAjaxPageHtmlHeader上記の 2 つの js ファイルの URL を追加する必要がある方法があります。それはここにあります: https://vaadin.com/forum/-/message_boards/view_message/254632#_19_message_254632

プロジェクトでmavenを使用しているので、依存関係を追加します（mavenを使用していない場合は、jarをWEB-INF/libフォルダーに追加します）

後で、gwt:clean、vaadin:update-widgetset、gwt-compile maven プラグインを使用してアプリ ウィジェット セットを再コンパイルします (maven を使用しない場合、コマンドは Ctrl+6 だと思います)。

最後に、チャートをコンポーネントに追加するコードは次のようになります。

package com.x.y.z;

import java.util.LinkedHashSet;
import java.util.Map;
import com.invient.vaadin.charts.InvientChartsConfig;
import com.x.y.Manager;
import com.x.y.util.ApplicationHelper;

public class SalesChat extends AbstractChart {

    private static final long serialVersionUID = -793793426045107314L;

    public SalesChat(InvientChartsConfig chartConfig) {
        super(chartConfig);
    }

    @Override
    public void build() {

        Manager manager = (Manager)ApplicationHelper.getApplicationContext().getBean("manager");
        Map<String, Integer> sales = manager.weeklySales();

        XYSeries series = new XYSeries("Sales");
        LinkedHashSet<DecimalPoint> points = new LinkedHashSet<DecimalPoint>();

        for( String string : sales.keySet() ){

            DecimalPoint point = new DecimalPoint(series, string, sales.get(string));
            point.setName( string + " " + sales.get(string).toString());
            points.add( point );
        }

        series.setSeriesPoints(points);
        addSeries(series);
        setWidth("279px");
        setHeight("240px");

    }
}

後で...

InvientChartsConfig chartConfig = new InvientChartsConfig();
chartConfig.getTitle().setText("Sales");
chartConfig.getGeneralChartConfig().setType(SeriesType.PIE);

SalesChat chart = new SalesChat(chartConfig);
chart.build();

VerticalLayout layout = new VerticalLayout();
layout.addComponent(chart);
于 2012-09-18T16:00:36.750 に答える