Question

过去三个小时我一直在尝试使用vaadin中的invient-charts附加组件创建一个简单的饼图。我已经阅读了很多关于它的内容，并将jquery.js和highcharts.js放入webcontent文件中。我修改了我的xml文件以引用我的应用程序servlet。但它仍然无效。我想我也做错了。它现在让我发疯。有人可以给我一个关于创建饼图或任何其他图表示例的简单教程吗？

Answer 1

因为你没有提供太多信息，我在这里发布了我采取的步骤......

首先，我将jquery和highcharts javascript文件添加到webapp / js文件夹中

现在，编辑您的应用程序servlet（扩展AbstractApplicationServlet的那个）...有一个方法 writeAjaxPageHtmlHeader ，您必须在其中添加上述两个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插件重新编译应用程序widgetset（如果不使用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);

如何在vaadin中创建一个带有invient-charts的简单饼图？

1 个答案: