Question

我需要从文本文件中读取数据，这些数据有很多行要加载到高图中，但是如果我把它放在很多行中，它会显示杂乱的文本 please see this link。我不想这样，我想如果文本文件中有超过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>

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

Answer 1

如果您查看参考文献，您会看到可以设置标签样式。

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

xAxys: {
    labels: {
        staggerLines: 10
    }
}

demo

或者你可以尝试rotate他们。

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

demo

参考：

http://api.highcharts.com/highstock#xAxis.labels.staggerLines

使用PHP将数据从文本文件加载到HIGHCHART图形中

1 个答案: