无法检测点击功能HighCharts plotLines& plotBands.events

时间:2016-08-21 22:08:20

标签: javascript function highcharts

通过以下这些事件,我应该能够检测Plotlines或Plotbands何时被鼠标移动并点击我的应用程序,但没有任何反应:(

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

Docs example

ArrayList

我可以检测到的唯一鼠标操作位于以下outState.putParcelableArrayList(new ArrayList<Model>(models)) 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!'); } } } } }] 函数中。

此外,只有点击蓝线图的点时,才会激活chartClick。

enter image description here

TooltipFactory.formatTooltip

chartClick函数:

chartClick

1 个答案:

答案 0 :(得分:0)

我找到了将PlotBands和PlotLines添加到图表中的区域:

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;
});

现在我可以使用下面的这个click函数,遇到问题但无法找到我点击的确切点。没有points密钥。哦,这可能是另一个问题。

对不起我们的应用程序的结构方式,使其过于复杂,无法使用简单的jsFiddle示例。