缩小时如何按高图表分组数据

Question

这是我正在使用的highchart选项：

let min = moment(new Date(1549011531000)).startOf("day").unix() * 1000
let max = moment(new Date(1549011531000)).endOf('day').unix() * 1000
let reportCount = [{"x":1549011531000,"title":"5","text":null},{"x":1549011547000,"title":"10","text":null},{"x":1549011559000,"title":"1","text":null},{"x":1549011577000,"title":"5","text":null},{"x":1549011588000,"title":"5","text":null},{"x":1549011658000,"title":"0","text":null},{"x":1549011682513,"title":"1","text":null},{"x":1549011695000,"title":"2","text":null},{"x":1549011709000,"title":"3","text":null},{"x":1549011726000,"title":"4","text":null},{"x":1549011743000,"title":"5","text":null},{"x":1549011756000,"title":"6","text":null},{"x":1549011769000,"title":"7","text":null},{"x":1549011779000,"title":"8","text":null},{"x":1549011791000,"title":"9","text":null},{"x":1549011802000,"title":"10","text":null}];
let reportLine = [{"x":1549011531000,"y":5},{"x":1549011547000,"y":10},{"x":1549011559000,"y":1},{"x":1549011577000,"y":5},{"x":1549011588000,"y":5},{"x":1549011658000,"y":0},{"x":1549011682513,"y":1},{"x":1549011695000,"y":2},{"x":1549011709000,"y":3},{"x":1549011726000,"y":4},{"x":1549011743000,"y":5},{"x":1549011756000,"y":6},{"x":1549011769000,"y":7},{"x":1549011779000,"y":8},{"x":1549011791000,"y":9},{"x":1549011802000,"y":10}];
let options = {
      tooltip : {
        hideDelay: 0,
      },
      plotOptions : {
        
        series : {
          turboThreshold: 100000,
          pointStart : min,
          pointInterval : 60 * 60 * 1000
          
        }
      },
      chart: {
        height : 180,
        alignTicks: false,
        panning: false,
        zoomType: 'x',
        resetZoomButton: {
          position: {
            align: 'right',
          },
          theme: {
            fill: 'white',
            stroke: 'silver',
            opacity: 0.8,
            r: 0,
            states: {
              hover: {
                fill: '#41739D ',
                style: {
                  color: 'white'
                  
                }
              }
            }
          }
        },
        animation: false
      },
      xAxis: {
        tickLength : 0,
        min : min,
        max : max,
        type : 'datetime',
        tickInterval : 60 * 60 * 1000,
        ordinal: false
      },
      rangeSelector:{
        enabled: false
      },
      navigator: {
        enabled: false
      },
      scrollbar:{
        enabled: false
      },
      title: {
        text: ''
      },
      credits: {
        enabled: false
      },
      legend: {
        adjustChartSize: true,
      },
yAxis : [{
        opposite: false,
        className: "YPR",
        min : 0,
        max : 15,
        tickInterval : 3,
        id: "PR",
        labels: {
          align: 'left',
          x: -6
        },
        title: {
          text: "Reports Graph",
          style: {
            color: '#0082af',
          },
        },
        lineWidth: 2,
      }],
      series: [
        {
          name: "Reports Series",
          data: reportLine,
          id: 'PRLINE',
          yAxis: "PR",
          type: 'line',
          color: 'transparent',
          enableMouseTracking: true,
          zoneAxis: 'y',
        },
        {
          name: "Report",
          type: 'flags',
          data: reportCount,
          shape: 'circle',
          id: 'PR',
          yAxis: "PR",
          style: { // text style
              color: 'white',
              fontFamily: 'Manrope',
          },
          color : '#2c618a',
          fillColor : '#2c618a',
          width: 15,
          height : 15,
          allowOverlapX : true,
          onSeries : 'PRLINE',
          enableMouseTracking: true,
          zoneAxis: 'y',
          states: {
            hover: {
                color : '#2c618a',
                fillColor: '#2c618a', // darker
                lineWidth : 5,
                lineColor : '#2c618a',
            }
          },
          lineColor : '#2c618a',
          lineWidth : 5,
          // y : 10
        }
      ]
    };
    Highcharts.stockChart('report',options)

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/6.0.3/highstock-all.js"></script>
<div id="report" class="chart" style=" width: 100%"></div>

由于在那一刻有很多数据，所以这些标志被聚集在一起，并且看不到很清楚。

当附近有其他标记并且图表完全处于缩小状态（最大缩小状态为1天）时，以及图表被放大时，如何汇总所有数据并将其显示为单个标记？并且可以显示所有标志，然后应该在相应位置显示所有标志。

Answer 1

您可以通过设置适当的dataGrouping.groupPixelWidth来实现。检查下面的演示和代码。

代码：

  plotOptions: {
    series: {
      dataGrouping: {
        groupPixelWidth: 100
      }
    }
  }

演示：

• https://jsfiddle.net/BlackLabel/Lr4c3612/

API参考：

• https://api.highcharts.com/highstock/plotOptions.series.dataGrouping.groupPixelWidth