在过去的三个小时里,我一直在尝试使用 vaadin 中的 invient-charts 插件创建一个简单的饼图。我已经阅读了很多关于它的内容,并将 jquery.js 和 highcharts.js 放入 webcontent 文件中。我修改了我的 xml 文件以引用我的应用程序 servlet。但它仍然不起作用。我想我也做错了这些事情。它现在让我发疯。有人可以为我提供有关创建饼图或任何其他图表示例的简单教程吗?
问问题
2639 次
1 回答
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,请将 jars 添加到 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 回答