Question

当我使用 highcharts 的内置滚动条滚动时，某些数据没有显示在 highcharts 表中，但是当我再次滚动时，数据显示出来，而其他一些数据被忽略了。

我使用的代码如下供参考

代码：-

<?php 
    $colorArray = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];

    $string ='[';
    for($i=1;$i<=15;$i++){        
        $yearString = rand(2016,2018);
        $monthString = rand(1,12);
        $dateString = rand(1,28); 
        $endYearString = rand(2019,2021);
        $string .= "{ start: Date.UTC($yearString, $monthString, $dateString),end: Date.UTC($endYearString, $monthString, $dateString),name: 'Initiative ".$i."',color: '".$colorArray[rand(0,8)]."', label:'Initiative ".$i."' },";
    }

    $string .= "{ start: Date.UTC(2020, 1, 1),end: Date.UTC(2021, 1, 12),name: 'Qus',color: '".$colorArray[rand(0,8)]."', label:'Qus' },";
    $string .= "{ start: Date.UTC(2021, 1, 12),end: Date.UTC(2021, 1, 22),name: 'Qus',color: '".$colorArray[rand(0,8)]."', label:'Qus' },";
    $string .= "{ start: Date.UTC(2021, 1, 23),end: Date.UTC(2021, 5, 31),name: 'Qus',color: '".$colorArray[rand(0,8)]."', label:'Qus' },";

    for($i=1;$i<=30;$i++){        
        $yearString = rand(2016,2018);
        $rnd  = rand(1,5);   
        for($j=1;$j<$rnd;$j++){  
            $monthString = rand(1,12);                  
            $dateString = rand(1,28);

            $endMonthString = rand(1,12);                  
            $endDateString = rand(1,28);
            $endYearString = rand(2016,2021);

            $string .= "{ start: Date.UTC($yearString, $monthString, $dateString),end: Date.UTC($endYearString, $endMonthString, $endDateString),name: 'Qus  ".$i." - ".$j."',color: '".$colorArray[rand(0,8)]."', label:'Qus ".$i." - ".$j."' },";
        }
    }
    $string .= "]";
   
    // echo $string;die;
 

?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

    <style>
     #container {
        max-width: 1200px;
        margin: 1em auto;
    }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <script>
   
     
    Highcharts.setOptions({
        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
    });

    
    Highcharts.ganttChart('container', {
        chart: {  
        spacingLeft: 1,
       style: {
            fontFamily: ' Roboto, sans-serif;',
            // fontWeigth: 'bolder'
        }
    },
title: {
          text: 'Gantt Chart with Navigation'
      },
yAxis: {
          uniqueNames: true,
          min: 0,
          max: 7,
          scrollbar:{
              enabled : true
          }
},

      xAxis: {
        currentDateIndicator: true,
        type: 'category',
        title: {
            text: null
        },
        min: 0,
        // max: 8,
        scrollbar: {
            enabled: true
        },
        tickLength: 0
},

    tooltip: {
        xDateFormat: '%a %b %d, %H:%M'
    },

      plotOptions:{
series: {
            pointWidth: 13,
          dataLabels: {
              enabled: true,
              format: '{point.label}',
              style: {
                  cursor: 'default',
                  pointerEvents: 'none'
              }
          },
        }
      },

      navigator: {
          enabled: true,
          series: {
              type: 'gantt',
              pointPlacement: 0.5,
              pointPadding: 0.25
          },
          yAxis: {
              min: 0,
              max: 3,
              reversed: true,
              categories: []
          }
      },
      scrollbar: {
          enabled: true
      },
      rangeSelector: {
          enabled: true,
          selected: 5
      },
      

      series: [{
          name: 'Project 1',
          events:{
            click: function(event){
              console.log(event)
              console.log(this)
              alert("Clicked");
            }
          },
          dataLabels: {
              enabled: true,
              style: {
                    textOutline: 0
                }
            },
          data:  <?php echo $string; ?> 
      }]
      });
const callback = function(){
        let text = document.querySelectorAll('.highcharts-data-label-color-undefined')
        let box = document.querySelectorAll('.highcharts-partfill-original')
        text.forEach((el,index)=>{
            let child = el.children[0];
            let boxWidth = box[index].getBoundingClientRect().width;
let textWidth = child.getBoundingClientRect().width;
            // console.log(textWidth,boxWidth)
            if (textWidth > boxWidth){
child.style.opacity = "0";
            }else{
                // child.textContent = z;
                child.style.fill = "white";
                child.style.opacity = "1";
            }
})
    };
    callback();
    window.addEventListener('resize', callback);
</script>
  </body>
</html>

Answer 1

滚动条：{ 启用：真 }, 事件：{ 设置极端：功能（e）{ 让 main = document.querySelector('.highcharts-plot-background').getBoundingClientRect(); const 调用 = 函数（）{ 让边界 = main.y + main.height; 让行 = document.querySelectorAll('.highcharts-tick') let texts = document.querySelectorAll('.highcharts-treegrid-node-level-1');

          texts.forEach(el=>{
            let textlines = el.getBoundingClientRect();
            if(textlines.y > main.y && textlines.y < bound-20){
              el.style.visibility = "visible"
            }else{
              el.style.visibility = "hidden"
            }
            
          })
          lines.forEach(el=>{
            let pathlines = el.getBoundingClientRect();
            let parent = el.parentNode
            if(parent.classList.contains('highcharts-yaxis')){
            if(pathlines.y > main.y && pathlines.y <bound){
              el.style.visibility = "visible"
              el.visibility = "visible"
            }else{
              el.style.visibility = "hidden"
              el.visibility = "hidden"
              }
            }
          })
        }
        setTimeout(function(){ call();},500)
      }
      }
  },

当我滚动 Gnatt highcharts 时，某些数据未显示在某些列中

1 个答案: