Kann nicht Klickfunktion HighCharts plotlines & plotBands.events

Question

Mit diesen Ereignissen unten erkennen, sollte ich in der Lage sein zu erkennen, wenn die Handlungsstränge oder Plotbands mouseOvered werden und angeklickt in meiner app, aber es passiert nichts :(

http://api.highcharts.com/highcharts/xAxis.plotLines.events

Docs example

xAxis: [ 
    { 
     dateTimeLabelFormats: { hour: '%l:%M%P' }, 
     id: 'main-x-axis', 
     events: { 
      setExtremes: prepareExtremes, 
      afterSetExtremes: afterSetExtremes 
     } 
    }, 
    { 
     id: 'x-axis-alert', 
     plotLines: [{ 
      id: 'alert-plotline', 
      zIndex: 1001, 
      events: { 
       click: function() { 
        console.log('plotLines Click') 
       }, 
       mouseover: function() { 
        console.log('plotLines hover') 
       }, 
       mouseout: function() { 
        console.log('plotLines out') 
       } 
      } 
     }], 
     plotBands: [{ 
      id: 'alert-plotband', 
      zIndex: 1001, 
      events: { 
       click: function() { 
        console.log('plotBands clicked!'); 
       }, 
       mouseover: function() { 
        console.log('plotBands hover') 
       }, 
       mouseout: function() { 
        console.log('plotBands out') 
       } 
      } 
     }], 
     linkedTo: 0, 
     showEmpty: false, 
     lineWidth: 0, 
     gridLineWidth: 0, 
     minorGridLineWidth: 0, 
     lineColor: 'transparent', 
     labels: { enabled: false } 
    }], 
series [{ 
     { 
    id: 'priceline', 
    name: 'price', 
    showInLegend: false, 
    zIndex: 1, 
    color: '#4C73FF', 
    data: [], 
    dataGrouping: { enabled: false }, 
    point: { 
     events: { 
      mouseOver: function(event) { 
       TooltipFactory.updateToolTipPoints('price', event.target); 
      } 
     } 
    } 
}, 
{ 
    id: 'alert-series', 
    name: 'alert', 
    yAxis: 'y-axis-alert', 
    xAxis: 'x-axis-alert', 
    data: [], 
    color: 'rgba(254,235,236,0.1)', 
    lineColor: 'transparent', 
    showInLegend: false, 
    dataGrouping: { enabled: false }, 
    lineWidth: 0, 
    minorGridLineWidth: 0, 
    point: { 
     events: { 
      click: function (event) { 
       console.log('alert-series clicked!'); 
      } 
     } 
    } 
} 
}] 

---

die einzigen Mausaktionen kann ich erkennen, sind in der TooltipFactory.formatTooltip und chartClick Funktionen unten.

Auch das chartClick wird nur aktiviert, wenn Sie auf die Punkte des blauen Liniendiagramms klicken.

vm.config = { 
    global: { useUTC : false }, 
    options: { 
     ignoreHiddenSeries: false, 
     chart: { 
      backgroundColor: '#474747', 
      title: { text: '' }, 
      subtitle: { text: '' }, 
      renderTo: 'chart1', 
      zoomType: 'x', 
      events: { 
       load:() => {} 
      } 
     }, 
     rangeSelector: {enabled: false}, 
     tooltip: { 
      shared: true, 
      useHTML: true, 
      backgroundColor: null, 
      borderWidth: 0, 
      shadow: false, 
      formatter: function(tooltipObj) { 
       return TooltipFactory.formatTooltip(tooltipObj, this.points); 
      } 
     }, 
     exporting: {enabled: false}, 
     plotOptions: { 
      series: { 
       turboThreshold: 0, 
        events: { 
         click: chartClick 
        } 
      }, 
      area: { stacking: 'normal' }, 
      column: { stacking: 'normal ' } 
     } 
    }, 

Die chartClick Funktion:

const chartClick = e => { 
    console.log('chartClick',e); 
    let extremes = chart.xAxis[0].getExtremes(); 
    let endDate = Math.round(e.point.category/1000); 
    let startDate = Math.round(extremes.min/1000); 
    $scope.$emit("timestamp.clicked", endDate, startDate); 
}; 

Answer 1

ich in der Gegend gefunden, wo PlotBands und Handlungsstränge in unseren Graphen hinzugefügt werden:

const formatPlotBand = _.curry((color, alert) => { 
    return { 
     color : color, 
     from : toMilliseconds(alert.start_epoch), 
     to : toMilliseconds(alert.end_epoch), 
     id :'alert-plotband', 
     events: { 
      click: function(e) { 
       console.log('this',this) 
       console.log('alert-plotband Clicked', e); 
      }, 
      mouseover: function(e) { 
       let target = { 
        name: alert.term, 
        type: alert.type, 
        percent: Math.floor(alert.percent_change) 
       } 
       TooltipFactory.updateToolTipPoints('alert', target); 
      }, 
      mouseout: function(e) { 
       let target = { 
        name: '', 
        type: '', 
        percent: '' 
       } 
       TooltipFactory.updateToolTipPoints('alert', target); 
      } 
     } 
    } 
}); 

const renderChartAlerts = _.curry((chart, alertObjects) => { 
    let plotLineData, plotBandData, alertSeriesData, xAxis, alertSeries; 

    xAxis = chart.get('x-axis-alert'); 
    alertSeries = chart.get('alert-series'); 

    alertSeriesData = _.map(alertObjects, prepareAlertSeries); 
    plotLineData = formatPlotLine(chart, 'rgba(254,235,236,0.5)'); 
    plotBandData = formatPlotBand('rgba(254,235,236,0.1)'); 

    plotLineData = _.map(alertObjects, plotLineData); 
    plotBandData = _.map(alertObjects, plotBandData); 

    alertSeries.setData(alertSeriesData); 

    _.each(plotLineData, (lineData, index) => { 
     xAxis.addPlotLine(lineData); 
     xAxis.addPlotBand(plotBandData[index]); 
    }); 

    return chart; 
}); 

Jetzt kann ich diese click verwenden Funktion unten, ein Problem aber nicht in der Lage, den exac zu finden Ich habe geklickt. Es gibt keinen points Schlüssel. Oh, das ist vielleicht eine andere Frage.

Es tut uns leid, wie unsere App strukturiert ist, zu komplex für ein einfaches jsFiddle-Beispiel.