ハイチャート：マーカーの書式設定を保持し、クリックイベントを5K +点散布図で発生させるにはどうすればよいですか？

Question

私たちは、スクリーン上の5,000ポイントに達すると散布図が異常に作動するようになっています。具体的には、5k +ポイントで、ポイントをクリックするとポイントイベント「クリック」が停止し、ポイントフォーマット（fillColor &シンボル）が失われます。

4999ポイント：http://jsfiddle.net/xrpf0pfq/7/

$(function() { 

// Prepare the data 
var data = [], 
    n = 4999, // < 5K points 
    i; 
for (i = 0; i < n; i += 1) { 
    data.push([ 
     Math.pow(Math.random(), 2) * 100, 
     Math.pow(Math.random(), 2) * 100 
    ]); 
} 

if (!Highcharts.Series.prototype.renderCanvas) { 
    console.error('Module not loaded'); 
    return; 
} 

console.time('scatter'); 
console.time('asyncRender'); 
$('#container').highcharts({ 

    chart: { 
     zoomType: 'xy' 
    }, 

    xAxis: { 
     min: 0, 
     max: 100, 
     gridLineWidth: 1 
    }, 

    yAxis: { 
     // Renders faster when we don't have to compute min and max 
     min: 0, 
     max: 100, 
     minPadding: 0, 
     maxPadding: 0 
    }, 

    title: { 
     text: 'Scatter chart with ' + Highcharts.numberFormat(data.length, 0, ' ') + ' points' 
    }, 
    legend: { 
     enabled: false 
    }, 
    series: [{ 
     type: 'scatter', 
     data: data, 
     marker: { 
      radius: 5, 
      symbol: 'triangle', //shows correctly 
      fillColor: 'rgba(128,0,128,1)' //shows correctly 
     }, 
     point: { 
      events: { 
       click: function() { 
        alert("click"); //event is fired correctly 

       } 
      } 
     }, 
     tooltip: { 
       enable: false, 
      followPointer: false, 
      pointFormat: '[{point.x:.1f}, {point.y:.1f}]' 
     }, 
     events: { 
      renderedCanvas: function() { 
       console.timeEnd('asyncRender'); 
      } 
     } 
    }] 

}); 
console.timeEnd('scatter'); 

}); 

5000ポイント：http://jsfiddle.net/xrpf0pfq/10/

$(function() { 

// Prepare the data 
var data = [], 
    n = 5000, // 5K points 
    i; 
for (i = 0; i < n; i += 1) { 
    data.push([ 
     Math.pow(Math.random(), 2) * 100, 
     Math.pow(Math.random(), 2) * 100 
    ]); 
} 

if (!Highcharts.Series.prototype.renderCanvas) { 
    console.error('Module not loaded'); 
    return; 
} 

console.time('scatter'); 
console.time('asyncRender'); 
$('#container').highcharts({ 

    chart: { 
     zoomType: 'xy' 
    }, 

    xAxis: { 
     min: 0, 
     max: 100, 
     gridLineWidth: 1 
    }, 

    yAxis: { 
     // Renders faster when we don't have to compute min and max 
     min: 0, 
     max: 100, 
     minPadding: 0, 
     maxPadding: 0 
    }, 

    title: { 
     text: 'Scatter chart with ' + Highcharts.numberFormat(data.length, 0, ' ') + ' points' 
    }, 
    legend: { 
     enabled: false 
    }, 
    series: [{ 
     type: 'scatter', 
     data: data, 
     marker: { 
      radius: 5, 
      symbol: 'triangle', //marker shape not showing 
      fillColor: 'rgba(128,0,128,1)' //color not showing 
     }, 
     point: { 
      events: { 
       click: function() { 
        alert("click"); //click even not firing 

       } 
      } 
     }, 
     tooltip: { 
       enable: false, 
      followPointer: false, 
      pointFormat: '[{point.x:.1f}, {point.y:.1f}]' 
     }, 
     events: { 
      renderedCanvas: function() { 
       console.timeEnd('asyncRender'); 
      } 
     } 
    }] 

}); 
console.timeEnd('scatter'); 

}); 

マーカーの書式設定を維持し、あなたが飛散上5K以上のポイントを持っていたときにクリックイベントの火を作成する方法はありますプロット？

Answer 1

明らかに、この現象は、ブーストモジュールによって発生します。それなしの例を見て：http://jsfiddle.net/xrpf0pfq/12/。 boostThresholdプロパティが値5000に設定されていることをブーストモジュール（http://code.highcharts.com/modules/boost.src.js）のソースコードでチェックインできます。boostThresholdを自分で設定することができます。例：http://jsfiddle.net/xrpf0pfq/16/をチェックしてください。

plotOptions: { 
    series: { 
     boostThreshold: 8001 
    } 
} 

はまた、ブーストモジュールでない作業クリックイベントが既知の問題です（横に、彼らの何千ものがあるポイントをクリックするのは良い考えではありません、彼らは人口が密集しています）。 GitHubのこのトピックを見てみましょう： https://github.com/highcharts/highcharts/issues/4569を回避する方法があります。 Pawełが言及したように、膨大なポイントでクリックイベントを処理するには、ハローを有効にしてクリック可能にする必要があります（ここでは、ブーストモジュールがロードされ、boostThreshold値よりも多くクリックイベントが働いている例があります： http://jsfiddle.net/xrpf0pfq/17/）。

mouseOver: function() { 
    if (this.series.halo) { 
     this.series.halo.attr({'class': 'highcharts-tracker'}).toFront(); 
    } 
} 

よろしくお願いいたします。

Answer 2

同じ問題があります。ハローの回避策は私のためには機能しませんでした。なぜなら、最近強調表示されたポイントのクリックイベントは、直接クリックされていなくても取得したいからです。 Highchartsには、チャート上の任意の場所をポイントすると最も近いポイントを強調表示する機能があります。私の回避策は、ツールヒントのフォーマッタを使用してx値を保存し、それをチャートのグローバルクリックイベントで使用することです。

はフィドルを参照してください：

http://jsfiddle.net/StefanJelner/a1m0wuy6/

var recent = false; 
$('#container').highcharts({ 
    chart: { 
     events: { 
      click: function() { 
      console.log('chart click', recent); 
      } 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      recent = this.x; 
      return 'The value for <b>' + this.x + 
      '</b> is <b>' + this.y + '</b>'; 
     } 
    }, 
    plotOptions: { 
     series: { 
      point: { 
       events: { 
        click: function (e) { 
         console.log('point click', e); // never happens 
        } 
       } 
      } 
     } 
    } 
}); 

また、これはバージョン6