【问题标题】:HIghcharts, Selecting a second Point within the Point.select eventHIghcharts,在 Point.select 事件中选择第二个点
【发布时间】:2013-06-21 10:31:34
【问题描述】:
$(function () {
  var chart = {
    plotOptions: {
      series: {
        point: {
          'events' : {
            select: function(){
              var pId = this.series.data.indexOf(this);

              var chart1 = $('#container').highcharts();
              var chart2 = $('#container2').highcharts();


        //These are the extra selects I want to happen
        //chart1.series[0].data[5].select(true,true);
        //chart2.series[0].data[pId].select();

            }
          }
        }
      }
    },
    series: [{
      data: [29.9, 71.5, 106.4,
             129.2, 144.0, 176.0,
             135.6, 148.5, 216.4,
             194.1, 95.6, 54.4]
    }] 
  };
  $('#container').highcharts(chart);
  $('#container2').highcharts(chart);

  var chart = $('#container').highcharts();

  i = 0;
  $('#button').click(function() {
    if (i == chart.series[0].data.length) 
    i = 0; 

    chart.series[0].data[i].select();
    i++;
  });


});

http://jsfiddle.net/rphne/

http://jsfiddle.net/rphne/5/

您可以在那里看到我正在努力实现的目标。本质上,我想在选择事件发生后选择同一张图上的一个点,以及第二个图上的一个点。

在上面的示例中,它应该在图表 1 和图表 2 上选择相同的点,以及在图表 1 上选择第二个点。

我认为只执行 .Select(true,true) 会累积,但是在 select 事件中完成时会失败。我相信我正在寻找一种回调事件之类的东西,以便在 Select 成功完成后,我可以进行额外的选择。

有什么建议吗?

【问题讨论】:

    标签: javascript events select callback highcharts


    【解决方案1】:

    在按钮操作中,您只能从一个图表中选择一个点,因为在第一个对象中使用 chart.series[0].data[i].select();。只有您需要为第二张图表添加相同的操作。

    http://jsfiddle.net/rphne/1/

    编辑: 您还可以使用 setState() 函数来同步两个图表。 http://jsfiddle.net/rphne/6/

    【讨论】:

    • 是的,在这个例子中,功能很容易放在 .select 按钮中,但是我打算通过点击图表来使用这个功能。这就是为什么我一直在尝试在事件中使用该功能,因为它是我能够操纵事物的第一个停靠点。
    • 太酷了!如果您不介意最后一个问题,jsfiddle.net/rphne/7 我添加了第二个数据系列,当您单击顶部图表中系列上的一个点时,它旨在突出显示系列 2 中的同一点。它突出显示它并且将其标记为已选中,但是当您将鼠标悬停并再次返回时,您会看到它实际上未被选中。有什么建议吗?
    • 所以当你点击第一个图表,第一个系列时,选择的点应该只在第二个系列中,或者不是。我不确定……
    • 忽略底部图表,当您单击顶部图表系列 1 时,意味着选择系列 2 上的相同点(反之亦然)。它表明它选择了 S2 上的同一点(带有白色标记),但是当您将鼠标悬停在它上面时,它会消失。仅显示选择了 1 个点。
    猜你喜欢
    • 1970-01-01
    • 2011-09-26
    • 2014-03-27
    • 2012-07-13
    • 2016-02-17
    • 1970-01-01
    • 1970-01-01
    • 2021-01-25
    • 2017-02-20
    相关资源
    最近更新 更多