我正在使用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 + '"';
});
我必须填写dates
和data
,第二个字段用于填充" Mensagem" (图1),但我无法从数据中解析这个值。如何从数据源解析此值?