我知道这个问题已经被问过了，但是我对Dygraphs非常陌生，并且一直在努力寻找答案。
我在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个时间序列，我将每个时间序列分为两个部分（虚线部分和非虚线部分），现在我想突出显示整个时间序列（因此，在Dygraphs上有2个不同的序列是虚线序列，并且我将鼠标一分为二），当我将鼠标移到虚线区域或非虚线区域上时。
我已经看到人们在规定要使用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
}});
我尝试了许多不同的语法，但是似乎没有任何正常工作。
任何人都可以帮助我，我迷路了。
这是我想要实现的目标：
http://www.google.co.uk/publicdata/explore?ds=k3s92bru78li6_#!ctype=l&strail=false&bcs=d&nselm=h&met_y=ggxwdn_ngdp&scale_y=lin&ind_y=false&rdim=world&idim=world:Earth&idim=country:AR:DZ:AU:AZ&ifdim=world&tstart=343382400000&tend=1574064000000&hl=en_US&dl=en_US&ind=false
非常感谢！
最佳答案
如果我理解正确，则您已经设置了以下内容：jsbin
通常，您使用highlightSeriesOpts为突出显示的系列设置样式，但这是假设只有一个突出显示的系列。
如果要以这种方式对数据建模（作为实际和预测的单独系列），则需要使用highlightCallback自行设置系列的样式。关于这点，我将在下面进行一些概述，但这是可行的。
演示：jsbin
g = new Dygraph(document.getElementById("graph"),
"X,Y,Y projected,Z,Z projected\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",
{
colors: ['blue', 'blue', 'red', 'red'],
series: {
'Y': { },
'Y projected': { strokePattern: [5, 5] },
'Z': { },
'Z projected': { strokePattern: [5, 5] }
},
highlightCallback: function(_, _, _, row, seriesName) {
update(seriesName, row);
},
unhighlightCallback: function() {
update();
},
highlightSeriesOpts: {},
highlightSeriesBackgroundAlpha: 1.0
});
function update(selectedSeries, row) {
var newOptions = {};
var seriesNames = g.getLabels().slice(1);
seriesNames.forEach(function(label) {
newOptions[label] = {strokeWidth: 1};
});
if (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.updateOptions({series: newOptions});
if (typeof(row) !== 'undefined') {
g.setSelection(row);
}
}
这个想法是您在
updateOptions中调用highlightCallback，根据是否选择了每个系列（或其配对系列）来设置每个系列的strokeWidth属性。关于此，有一些重要的事情：
您必须将
highlightSeriesOpts参数设置为seriesName才能传递给highlightCallback。您需要通过设置
highlightSeriesOpts抵消highlightSeriesBackgroundAlpha的默认衰落行为。调用
updateOptions将清除选择，因此您必须显式调用setSelection才能重新选择。如果您愿意将测得的和投影的值建模为一个序列，那么可以编写一个custom plotter使其更简洁地完成，该jsbin有时会从实线变为虚线。
这是一个演示：
g = new Dygraph(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",
{
plotter: function(e) {
var ctx = e.drawingContext;
ctx.beginPath();
ctx.moveTo(e.points[0].canvasx, e.points[0].canvasy);
for (var i = 1; i < e.points.length; i++) {
var p = e.points[i];
ctx.lineTo(p.canvasx, p.canvasy);
if (p.xval == 2014) {
ctx.stroke();
ctx.beginPath();
ctx.moveTo(p.canvasx, p.canvasy);
ctx.setLineDash([5]);
}
}
ctx.stroke();
ctx.setLineDash([]);
},
highlightSeriesOpts: {
strokeWidth: 3
}
});
由于您的数据是单个系列，因此您不再需要同时突出显示多个系列，因此可以使用
highlightSeriesOpts。