可视化有关EventDrops.js

时间:2017-04-26 18:53:11

标签: javascript d3.js graph data-visualization

我正在使用Eventdrops.js版本0.2.0开发一个小工具。我使用这个版本是因为我只需要javascript文件而没有像nodejs这样的额外内容。我成功地在图表上绘制数据,但我的问题是在eventhover事件上显示额外的数据。我使用以下方法生成数据和处理事件的代码:

javascript代码

    data = [{name: "(X)       - Erro", dates: XdataErro.map(function(a){return a.timestamp;}).reverse(),    data: XdataErro.map(function(a){return a.message;}),       color: "red"},
            {name: "(X)       - Info", dates: XdataInfo.map(function(a){return a.timestamp;}).reverse(),   data: XdataInfo.map(function(a){return a.message;}),       color: "green"},
            {name: "(X - AC)  - Erro", dates: XACdataErro.map(function(a){return a.timestamp;}).reverse(),   data: XACdataErro.map(function(a){return a.message;}),     color: "red"},
            {name: "(X - AC)  - Info", dates: XACdataInfo.map(function(a){return a.timestamp;}).reverse(),   data: XACdataInfo.map(function(a){return a.message;}),     color: "green"},                
            {name: "(AC - X)  - Erro", dates: ACXdataErro.map(function(a){return a.timestamp;}).reverse(),   data: ACXdataErro.map(function(a){return a.message;}),     color: "red"},
            {name: "(AC - X)  - Info", dates: ACXdataInfo.map(function(a){return a.timestamp;}).reverse(),   data: ACXdataInfo.map(function(a){return a.message;}),     color: "green"},
            {name: "(Y-X) - Erro", dates: YXdataErro.map(function(a){return a.timestamp;}).reverse(),data: YXdataErro.map(function(a){return a.message;}),  color: "red"},
            {name: "(Y-X) - Info", dates: YXdataInfo.map(function(a){return a.timestamp;}).reverse(),data: YXdataInfo.map(function(a){return a.message;}),  color: "green"},
            {name: "(X-Y) - Erro", dates: XYdataErro.map(function(a){return a.timestamp;}).reverse(),data: XYdataErro.map(function(a){return a.message;}),  color: "red"},
            {name: "(X-Y) - Info", dates: XYdataInfo.map(function(a){return a.timestamp;}).reverse(),data: XYdataInfo.map(function(a){return a.message;}),  color: "green"}];

    var eventDropsChart = d3.chart.eventDrops();


    eventDropsChart.start(startTime)
            .width(window.innerWidth)
            .eventLineColor(function(e){
            console.log(e);
            return e.color;
            }).eventHover((n) => {
              var series = n.parentNode.firstChild.innerHTML;
              var timestamp = d3.select(n).data()[0];
              var message = d3.select(n).data()[1];
              document.getElementById('legend').innerHTML = 'Mensagem = '+message+ ' \nTempo = ' + timestamp + '\nseries "' + series + '"';

            });

我必须填写datesdata,第二个字段用于填充" Mensagem" (图1),但我无法从数据中解析这个值。如何从数据源解析此值?

Output example

0 个答案:

没有答案