Question

我知道之前已经问过这个问题，但我对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

非常感谢！

Answer 1

如果我理解正确，您可以设置如下内容：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以重新选择。

如果您愿意对测量的＆amp;将预测值作为单个系列，然后您可以通过编写custom plotter来更清晰地完成此操作，该jsbin在某些时刻从实线切换为虚线。

以下是演示：{{3}}

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。

Dygraphs - 同时突出显示两个系列

1 个答案: