Question

Highcharts plotbands事件在尝试与日期范围行系列

一起使用时无效

这是我的fiddle

如果我只使用一个ploband，那么它的工作正常，但是如果我使用多个绘图带，那么事件就不起作用了。

如果有人解决了这个问题，请回答。

$(function () {
    Highcharts.stockChart('container', {

    rangeSelector: {
        buttonTheme: { // styles for the buttons
            fill: 'none',
            stroke: 'none',
            'stroke-width': 0,
            r: 8,
            style: {
                color: '#039',
                fontWeight: 'bold'
            },
        },
        labelStyle: {
            color: 'silver',
            fontWeight: 'bold'
        },
        selected: 1
    },
     xAxis: {
        plotBands: [{
            color: '#FCFFC5',
            from: Date.UTC(2010,06,06),
            to: Date.UTC(2011,05,06),
            id: 'plotband-1',
            events: {
                click: function (event) {
                        alert('event1');
                    }
                },
        },{
            color: '#FCFFC5',
            from: Date.UTC(2014,06,06),
            to: Date.UTC(2015,05,06),
            id: 'plotband-1',
            events: {
                click: function (event) {
                        alert('event2');
                    }
         }
     }]
    },

    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});
});

提前致谢。

Answer 1

更新

看起来这个错误是由不同的东西引起的。作为解决方法，您可以通过设置图表单击事件来模拟绘图带事件功能，并在回调检查内部检查鼠标是否位于特定绘图带内 - 如果是，则触发与绘图带关联的回调。 / p>

string fileWritePath = "c:\\temp\\test.docx";
//here fileContent is a byte[]
File.WriteAllBytes(fileWritePath, fileContent);
FileStream fileStream = new FileStream(fileWritePath, FileMode.Open, FileAccess.Read);

定义customClick属性：

    chart: {
    panning: true,
  events: {
    click: function (e) {
      var xAxis = this.xAxis[0],
          plotBands = xAxis.plotLinesAndBands,
          x = e.chartX;

      plotBands.forEach(function (plotBand, i) {
        var options = plotBand.options,
            events = options.events;

        if (xAxis.toPixels(options.from) <= x && x <= xAxis.toPixels(options.to) && events && events.customClick) {
      //    console.log('clicked');
          events.customClick.call(plotBand, e);
        }
      });
    }
  }
},

示例：http://jsfiddle.net/cup7h00L/17/

更新前答案

似乎情节带事件被十字准线阻挡。如果禁用十字准线，则事件有效。

      plotBands: [{
    color: '#FCFFC5',
    from: Date.UTC(2010, 06, 06),
    to: Date.UTC(2011, 05, 06),
    id: 'plotband-1',
    events: {
   //   click: function(event) {
    //    alert('event1');
   //   },
      customClick: function (e) {
        console.log(this, e, '1');
      }
    },

示例：http://jsfiddle.net/cup7h00L/6/

另外，如果你想启用十字准线，你可以设置十字准线＆＃39; pointer-events为无（检查该属性是否与svg元素的浏览器兼容）。

xAxis: {
        crosshair: false,

示例：http://jsfiddle.net/cup7h00L/7/

Answer 2

试试这段代码..

chart: {
    panning: true,
  events: {
    click: function (e) {
      var xAxis = this.xAxis[0],
          plotBands = xAxis.plotLinesAndBands,
          x = e.chartX;

      plotBands.forEach(function (plotBand, i) {
        var options = plotBand.options,
            events = options.events;

        if (xAxis.toPixels(options.from) <= x && x <= xAxis.toPixels(options.to) && events && events.customClick) {
      //    console.log('clicked');
          events.customClick.call(plotBand, e);
        }
      });
    }
  }
},

日期范围线系列中的情节带的Highcharts事件问题

2 个答案:

更新

更新前答案