Javascript 动态图-同时突出显示两个系列

我知道之前已经有人问过这个问题，但我对动态图非常陌生，很难找到答案。 我有以下javascript数据结构：

x , Label1, Label2, label3.... label1_2, label1_3, etc...
new Date(...), 1.23,1.45,.... , .... , ....,
new Date(...), null, null, ......., 1.23,1.434
new Date(....), 1.4656, 1.6765.......,null, null,null

整个想法是绘制一个图，其中线的某一部分为虚线，其余部分为非虚线。我最初有7个时间序列，我将每个时间序列分成两部分（虚线部分和非虚线部分），现在我想突出显示整个时间序列（因此有两个不同的序列，分别是虚线序列和我分成两部分的非虚线）当我将鼠标放在虚线区域或非虚线区域上时

我看到人们规定使用HihlightCallback，但我正在努力将其付诸实践

目前我所拥有的：

data =[new Date(), ..,..,.,,.,,.]
labels= {'A','B', ..... }
series= {'A': {strokePattern: [10, 20] }, 'B': .......}

g = new Dygraph( demo, data, {width: 1000,height: 700,labelsDivStyles: { 'textAlign': 'right' }, labels: labels,series:series, visibility: visibility, gridLineColor: 'red', gridLinePattern: [5,5], highlightCircleSize: 2,strokeWidth: 1, strokeBorderWidth: 1,highlightSeriesOpts: { strokeWidth: 3,strokeBorderWidth: 1,highlightCircleSize: 5}});

我认为我的结构应该如下：

g.updateOptions({ highlightCallback: function(event, x, points, row, seriesName) {
//1)here I need to somehow reference the other series whose label is situated N columns from the highlighted serie ( I can also reference it by its name).
// 2) Hilight the other serie                                                 
                         }});

我尝试了许多不同的语法，但似乎没有什么能正常工作。 谁能帮我一下吗？我迷路了

以下是我想要实现的目标：

---

非常感谢

如果我理解正确的话，您设置了如下内容：

通常，您可以使用

highlightSeriesOpts

设置高亮显示系列的样式，但前提是只有一个高亮显示系列

如果您希望以这种方式对数据建模（作为实际和预测的单独序列），则需要使用

highlightCallback

自行设置序列的样式。关于这件事，我将在下面提到一些粗俗的事情，但这是可行的

演示：

g=newdygraph（document.getElementById（“graph”），
X，Y，Y投影，Z，Z投影\n+
“2006,0,3,n”+
“2008,2,6,n”+
“2010年4月8日\n”+
“2012年6月9日\n”+
“2014,8,8,9,9\n”+
“2016年10月8日\n”+
“2018年12月6日\n”+
“2020、14、3\n”，
{
颜色：[“蓝色”、“蓝色”、“红色”、“红色”]，
系列：{
'Y'：{}，
'Y投影'：{strokePattern:[5,5]}，
'Z'：{}，
'Z投影'：{strokePattern:[5,5]}
},
highlightCallback:函数（，，，行，序列名）{
更新（序列名称，行）；
},
unhighlightCallback:函数（）{
更新（）；
},
highlightSeriesOpts:{}，
Highlight系列背景Alpha:1.0
});
功能更新（选定系列，第行）{
var newOptions={}；
var seriesNames=g.getLabels（）.slice（1）；
seriesNames.forEach（函数（标签）{
newOptions[label]={strokeWidth:1}；
});
如果（selectedSeries=='Y'| | selectedSeries=='Y projected'）{
newOptions['Y']=newOptions['Y projected']={strokeWidth:3}；
}else if（selectedSeries=='Z'| | selectedSeries=='Z projected'）{
newOptions['Z']=newOptions['Z projected']={strokeWidth:3}；
}
g、 更新选项（{series:newOptions}）；
如果（行的类型）！=‘未定义’）{
g、 选举（世界其他地区）；
}
}

其思想是在

highlightCallback

中调用

updateOptions

，根据是否选择了每个序列（或其配对序列），为每个序列设置

strokeWidth

属性

关于这件事，有几件很恶心的事：

• 您必须设置

  highlightseriespots

  以将

  seriesName

  参数传递给

  highlightCallback

• 您需要通过设置

  highlightSeriesBackgroundAlpha

  来抵消

  highlightseriespots

  的默认淡入行为
• 调用

  updateOptions

  清除选择，因此必须显式调用

  setSelection

  重新选择

如果您愿意将测量值和投影值建模为单个系列，那么您可以通过编写一个在某个点从实线切换到虚线的命令来更清晰地完成此任务

下面是一个演示：

g=newdygraph（document.getElementById（“graph”），
X，Y，Z\n+
“2004,0,3\n”+
“2006,2,6\n”+
“2008,4,8\n”+
“2010,6,9\n”+
“2012,8,9\n”+
“2014,10,8\n”+
“2016,12,6\n”+
“2018,14,3\n”，
{
绘图仪：功能（e）{
var ctx=e.drawingContext；
ctx.beginPath（）；
ctx.moveTo（e.points[0]。canvax，e.points[0]。canvasy）；
对于（变量i=1；i

---

由于您的数据是单个系列，因此不再需要同时高亮显示多个系列，因此您可以使用

highlightSeriesOpts

完美地工作！非常感谢你！