AmCharts/JSF - 推送后折线图中显示的数据无效

Question

我对 AmCharts 折线图的生命数据更新有疑问。数据更改的事件出现在图表中，但它只显示无效值（见屏幕截图）

我的 JavaScript 应该处理来自 Bean DataGenerator 的消息

window.chartData = [{
        "date" : "1.1.2014",
        "value" : 0
    }];

AmCharts.ready(function() {

    window.AmSerialChart = new AmCharts.AmSerialChart();
    window.AmSerialChart.dataProvider = chartData;
    window.AmSerialChart.categoryField = "date";

    window.lineGraph = new AmCharts.AmGraph();
    window.lineGraph.valueField = "value";
    window.lineGraph.type = "line";
    window.AmSerialChart.addGraph(window.lineGraph);

    window.AmSerialChart.write('chartdiv');
});

function handlePushGlobalEvent(eventData)
{
    data = [
    {
        "date" : eventData.label,
        "value" : eventData.value
    }];

    window.chartData.push(data)
    window.AmSerialChart.validateData();
}

DataGenerator Bean

package org.jsfdemo.jee;

import java.text.SimpleDateFormat;
import java.util.Random;
import java.util.logging.Logger;

import javax.ejb.Schedule;
import javax.ejb.Singleton;
import javax.ejb.Startup;

import org.primefaces.push.EventBus;
import org.primefaces.push.EventBusFactory;

@Singleton
@Startup
public class DataGenerator {
    private static final Logger logger = Logger.getLogger(DataGenerator.class
            .getName());
    private Random generator = new Random();

    @Schedule(second = "*/2", minute = "*", hour = "*", persistent = false)
    public void createDataEvent() {
        logger.info("Data event generated");
        EventBus eventBus = EventBusFactory.getDefault().eventBus();
        EventMessage message = getBasicMessage();
        eventBus.publish(ChartView.CHANNEL, message);
    }

    private EventMessage getBasicMessage() {
        EventMessage message = new EventMessage();
        long value;
        String label = new String();

        value = generator.nextInt(10);
        label = new SimpleDateFormat("hh:mm:ss").format(
                System.currentTimeMillis()).toString();

        message.setDataValue(value);
        message.setDataLabel(label);
        return message;

    }
}

ChartView Bean

package org.jsfdemo.jee;

import java.io.Serializable;
import java.util.logging.Logger;

import javax.faces.event.ActionEvent;
import javax.faces.view.ViewScoped;
import javax.inject.Named;

import org.primefaces.push.EventBus;
import org.primefaces.push.EventBusFactory;

@Named("chartView")
@ViewScoped
public class ChartView implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = 5648777247751782749L;
    public final static String CHANNEL = "/graphChanel";
    private static final Logger logger = Logger.getLogger(ChartView.class.getName());

    public void sendData(ActionEvent actionEvent)
    {
        logger.info("sendData event");
        send();
    }

    public void send() {
        EventBus eventBus = EventBusFactory.getDefault().eventBus();
        EventMessage message = new EventMessage();
        eventBus.publish(CHANNEL, message);
    }

}

我的index.xhtml

<!DOCTYPE html>
<html xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>JSFDemo</title>
    <h:outputScript library="amcharts" name="amcharts.js" />
    <h:outputScript library="amcharts" name="amstock.js" />
    <h:outputScript library="amcharts" name="serial.js" />
    <h:outputScript library="js" name="graphOperations.js" />
    <h:outputStylesheet library="css" name="style_common.css" />
</h:head>
<h:body>
     <div id="chartdiv" style="width: 640px; height: 400px;"></div>
    <p:socket onMessage="handlePushGlobalEvent" channel="/graphChanel" />
</h:body>
</html>

事件消息class

package org.jsfdemo.jee;


public class EventMessage {

    private long dataValue;
    private String dataLabel;

    public EventMessage() {

    }

    public EventMessage(long dataValue, String dataLabel) {
        this.dataValue = dataValue;
        this.dataLabel = dataLabel;
    }

    public long getDataValue() {
        return dataValue;
    }

    public void setDataValue(long dataValue) {
        this.dataValue = dataValue;
    }

    public String getDataLabel() {
        return dataLabel;
    }

    public void setDataLabel(String dataLabel) {
        this.dataLabel = dataLabel;
    }



}

希望能帮到你

Answer 1

哦，知道了

问题出在 chartData 对象的函数 hanleGlobalPushEvent 中

data = [
    {
        "date" : eventData.label,
        "value" : eventData.value
    }];

它是数组的定义，但图表数据是具有两个值的简单对象

应该是这样的

data = 
    {
        "date" : eventData.label,
        "value" : eventData.value
    };

AmCharts/JSF - 推送后折线图中显示的数据无效

AmCharts/JSF - Invalid data shown in Line Graph after push

javascript

jsf

websocket

amcharts