我正在尝试使用PUBNUB EON charting library绘制样条图。我不明白这里出了什么问题。我可以在控制台中看到数据,但该图表未呈现,只有x和y轴线。我正在从python SDK获取数据,并通过javascript SDK进行订阅。控制台中没有错误消息。

我的python代码是

def counterVolume(data):
  for each in data:
    y = each.counter_volume
    data_clean = json.dumps(y, indent=4, separators=(',', ': '))
    print pubnub.publish(channel='channel', message= data_clean)


counterVolume(data)

我的订阅javascript函数是
       var data;
       var pubnub = PUBNUB.init({
                                publish_key: 'pub',
                                subscribe_key: 'subf'
                                            });

       var channel = "c3-spline";
                    eon.chart({
                             history: true,
                            channel: 'channel',
                             flow: true,
                               generate: {
                                bindto: '#chart',
                                data: {
                                x: 'x',
                                labels: false
                                        },
                               axis : {
                                  x : {
                                  type : 'timeseries',
                                  tick: {
                                 format: '%m-%d %H:%M:%S'
                                        }
    }
    } }});
    function dataCallback(){
                        pubnub.subscribe({
                                  channel: 'channel',
                                  message: function(m){
                                           data = m
                                           console.log(data)
          }
        });
        };
 dataCallback();
 pubnub.publish({
                     channel: 'orbit_channel',
                     message: {
                            columns: [
                                     ['x', new Date().getTime()],
                                     ['y', data]
              ]
            }
          })

我可以在控制台中看到这些值,但不明白为什么它无法在图表上呈现。

python脚本的结果:
89453.0
89453.0
89453.0
89453.0

最佳答案

PubNub EON自定义流图表数据格式

为了在图表上呈现和显示数据,PubNub EON需要特定的格式。您可以使用需要transform的内置function(){}参数来呈现任何数据格式。所提供的转换功能像对map操作的回调一样,可对数据进行转换以匹配所需的EON格式。

用于流图数据的PubNub EON转换方法

使用来自PubNub Public Streams的示例流。
您可以使用transform方法来格式化EON消息。

EON流图数据格式

{ columns : [
    ['x', new Date().getTime()],
    ['Humidity', m.humidity],
    ['Temperature', m.ambient_temperature],
    ['Light', m.photosensor]
] }

流图表数据设置示例

这是为EON流图表格式化的工作PubNub流的示例。使用transform方法,您的JavaScript应该如下所示:
<script>
var pubnub = PUBNUB({
    subscribe_key : 'YOUR_SUBSCRIBE_KEY_HERE' // <-- CHANGE!!!
});

eon.chart({
    pubnub   : pubnub,
    history  : false,
    channel  : 'channel', // <-- YOUR CHANNEL
    flow     : true,
    generate : {
        bindto : '#chart',
        data   : {
            x      : 'x',
            labels : true
        },
        axis : {
            x : {
                type : 'timeseries',
                tick : {
                    format : '%Y-%m-%d'
                }
            }
        }
    },
    transform : function(data) {
        return { columns : [
            ['x', new Date().getTime()],
            ['Value', data]
        ] };
    }
});
</script>

10-08 07:55
查看更多