1

我需要从有很多行加载到 highchart 的文本文件中读取数据，但如果我把它放多行，它会显示凌乱的文本，请看这个链接。我不希望这样，我希望如果文本文件中有超过 20 行，应该显示 2 或 3 个高图图形以使文本易于查看。我有如下的 PHP 代码和脚本代码：

<?php
            $PMTA_DATE = date("Y-m-d");
            $PMTA_FILE = file_get_contents("../stats_domain_emetteur.switchcall.com.".$PMTA_DATE.".txt");
            $lineFromText = explode("\n", $PMTA_FILE);
            //$number_bar_charts = 12;
            $row = 0;
            $cate = "";
            $total ="";
            $fail = "";
            $mailSuc = "";
            $title = "";
            foreach($lineFromText as $line){
                   // if($row < $number_bar_charts){
                    $words = explode(";",$line);
                     $dateTime .= ','.$words[0];
                     if($title == ""){
                         $title = $words[0];
                     }
                     $cate .= ','."'$words[5]'";
                     $total .= ','.$words[6];
                     $fail .= ','.$words[7];
                     $mailSuc .= ','.((int)$words[6] -   (int)$words[7]);                           
                     $row++;
      // }   
     }

?>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Colunm Stack Percent Chat</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>        
<script type="text/javascript">     
$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'PMTA4',
            type: 'column'
        },
        title: {
            text: 'PMTA4 - Unitead.info -<?php echo $title;?>'
        },
        xAxis: {
            categories: [<?php echo substr($cate,1);?>]
        },
        yAxis: {
            min: 0,
            title: {
                text: '% envoi'
            }
        },
        tooltip: {
            formatter: function() {
                return ''+
                    this.series.name +': '+ this.y +' ('+ Math.round(this.percentage) +'%)';
            }
        },
        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },
            series: [{
            name: 'Total mail succesful',
            data: [<?php echo substr($mailSuc,1);?>]
        }, {
            name: 'Total mail fail',
            data: [<?php echo substr($fail,1);?>]
        }]
    });
});

});
    </script>

</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>

<div id="PMTA4" style="min-width: 400px; height: 200px; margin-top:10px;"></div>

</body>

</html>

我不知道如何解决这个问题，请任何人帮助我，谢谢。

4

1 回答 1

1

如果您查看参考资料，您会发现您可以设置标签样式。

staggerLines用于在多行中显示标签，但这不是一个好方法，您可以在我的演示中看到原因。

xAxys: {
    labels: {
        staggerLines: 10
    }
}

演示

或者你可以试试rotate他们。

xAxys: {
    labels: {
        rotate: 90, // you can use 45 or 60 for a better readability
        align: 'left'
    }
}

演示

参考：

于 2012-12-17T22:45:57.533 回答