Question

我对创建GanttChart很感兴趣。经过长时间的搜索，我找到了dhtmlxGantt

我在

中尝试了dhtmlxGantt的示例

http://www.dhtmlx.com/docs/products/dhtmlxGantt/download/dhtmlxGantt.zip

我现在的问题是图表的轴只显示了一天，你知道如何显示时间因为我需要显示具有开始时间的任务吗？这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <body>
        Hello from Facelets

        <h:link type="text/css" rel="stylesheet"
                href="resources/css/dhtmlxGantt/codebase/dhtmlxgantt.css"/>
        <script type="text/javascript" language="JavaScript"
        src="resources/css/dhtmlxGantt/codebase/dhtmlxcommon.js"></script>
        <script type="text/javascript" language="JavaScript"
        src="resources/css/dhtmlxGantt/codebase/dhtmlxgantt.js"></script>
        <script type="text/javascript" language="JavaScript"> /*<![CDATA[*/
            function createChartControl(htmlDiv1) {
                // Initialize Gantt data structures
                //project 1

                var project1 = new GanttProjectInfo(1, "Opérateur1", new Date(2010, 5, 11));
                var parentTask1 = new GanttTaskInfo(1, "OT1", new Date(2010, 5, 11), 4, 50, "");

                var parentTask2 = new GanttTaskInfo(2, "OT2", new Date(2010, 5, 11), 4, 80, "");
                project1.addTask(parentTask1);
                project1.addTask(parentTask2);
                var project2 = new GanttProjectInfo(2, "Opérateur2", new Date(2010, 5, 11));
                var parentTask11 = new GanttTaskInfo(4, "OT1", new Date(2010, 5, 11), 18, 50, "");

                var parentTask22 = new GanttTaskInfo(5, "OT2", new Date(2010, 5, 14), 190, 80, "");
                project2.addTask(parentTask11);
                project2.addTask(parentTask22);

                // Create Gantt control
                var ganttChartControl = new GanttChart();
                // Setup paths and behavior
                ganttChartControl.setImagePath("resources/css/dhtmlxGantt/codebase/imgs/");
                ganttChartControl.setEditable(true);
                ganttChartControl.showTreePanel(true);
                ganttChartControl.showContextMenu(true);
                ganttChartControl.showDescTask(true, 'd,s-f');
                ganttChartControl.showDescProject(false, 'n,d');


                // Load data structure
                ganttChartControl.addProject(project1);
                ganttChartControl.addProject(project2);

                // Build control on the page
                ganttChartControl.create(htmlDiv1);
            };
            /*]]>*/
        </script>

        <div style="width:1200px; height:620px; position:relative;" id="GanttDiv">
            <script type='text/javascript'></script>
        </div>

    </body>
</html>

Answer 1

在xhtml中使用primefaces标签

  <p:chart type="bar" model="#{chartView.horizontalBarModel}" style="height:300px"/>

和java代码

import javax.annotation.PostConstruct;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;

import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.BarChartModel;
import org.primefaces.model.chart.HorizontalBarChartModel;
import org.primefaces.model.chart.ChartSeries;

@ManagedBean
public class ChartView implements Serializable {

private HorizontalBarChartModel horizontalBarModel;

public HorizontalBarChartModel getHorizontalBarModel() {
    return horizontalBarModel;
}

private BarChartModel initBarModel() {
    BarChartModel model = new BarChartModel();

    ChartSeries boys = new ChartSeries();
    boys.setLabel("Boys");
    boys.set("2004", 120);
    boys.set("2005", 100);
    boys.set("2006", 44);
    boys.set("2007", 150);
    boys.set("2008", 25);

    ChartSeries girls = new ChartSeries();
    girls.setLabel("Girls");
    girls.set("2004", 52);
    girls.set("2005", 60);
    girls.set("2006", 110);
    girls.set("2007", 135);
    girls.set("2008", 120);

    model.addSeries(boys);
    model.addSeries(girls);

    return model;
}

private void createHorizontalBarModel() {
    horizontalBarModel = new HorizontalBarChartModel();

    ChartSeries boys = new ChartSeries();
    boys.setLabel("Boys");
    boys.set("2004", 50);
    boys.set("2005", 96);
    boys.set("2006", 44);
    boys.set("2007", 55);
    boys.set("2008", 25);

    ChartSeries girls = new ChartSeries();
    girls.setLabel("Girls");
    girls.set("2004", 52);
    girls.set("2005", 60);
    girls.set("2006", 82);
    girls.set("2007", 35);
    girls.set("2008", 120);

    horizontalBarModel.addSeries(boys);
    horizontalBarModel.addSeries(girls);

    horizontalBarModel.setTitle("Horizontal and Stacked");
    horizontalBarModel.setLegendPosition("e");
    horizontalBarModel.setStacked(true);

    Axis xAxis = horizontalBarModel.getAxis(AxisType.X);
    xAxis.setLabel("Births");
    xAxis.setMin(0);
    xAxis.setMax(200);

    Axis yAxis = horizontalBarModel.getAxis(AxisType.Y);
    yAxis.setLabel("Gender");       
 }

}`

`

使用JSF的甘特图

1 个答案: