Question

我有一个包含许多值的容器轴的图表。在我看来，我必须使用CSS属性定义图形的高度。但我不知道身高。当我对高度的预测太小时，一些标签会掉落。我想避免这种情况。不应丢弃任何标签。如何计算所需的高度？

＆＃13;

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Root Login Attempts'
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                enabled: false
            }
        },
        plotOptions: {
            series: {
                animation: false
            }
        },
        series: [{
            data : [
["61.174.51.231",857],
["1.93.32.212",706],
["61.174.51.209",611],
["61.174.51.220",326],
["122.225.109.99",302],
["122.225.109.216",269],
["122.225.109.221",267],
["61.167.49.135",251],
["223.203.195.90",213],
["122.225.109.104",205],
["122.225.109.102",199],
["122.225.109.111",182],
["122.225.109.109",181],
["122.225.109.107",172],
["144.0.0.51",158],
["122.225.109.115",157],
["122.225.109.222",157],
["61.174.51.198",149],
["61.174.51.194",146],
["61.174.51.205",142],
["122.225.109.117",139],
["122.225.109.105",129],
["122.225.109.110",122],
["61.174.51.219",117],
["122.225.109.213",115],
["122.225.109.206",114],
["183.63.52.30",105],
["122.225.109.203",101],
["61.174.51.204",79],
["122.225.109.208",69],
["23.102.67.210",58],
["122.225.109.201",52],
["192.69.94.98",26],
["122.70.133.245",16],
["122.225.109.200",10],
["94.247.101.107",7],
["58.18.172.171",6],
["58.83.146.252",5],
["189.203.240.73",4],
["193.104.41.201",4],
["61.133.211.118",2],
["222.186.21.38",1],
["59.173.13.72",1],
["65.181.118.16",1],
["125.65.245.146",1],
["139.0.12.151",1]
]
        }]
    };

    var chart = new Highcharts.Chart(options);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:100%; height:100%;"></div>

＆＃13;

Answer 1

使用CSS时，系统可以处理动态高度调整大小：

  #container {
       height:100%;
       width:100%;
       position:absolute;
  }

小提琴：http://jsfiddle.net/avqdu1x7/1/

Answer 2

解决方案是为标签添加step: 1选项。那种力量展示了它们。现在唯一的问题是重叠标签。在这种情况下，只需要显示要显示的点数，将它们乘以~20px（每个类别），并为标题和底部填充添加一些额外的填充（假设为100px）。现在你有高度可以用作chart.height选项。

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Root Login Attempts'
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        xAxis: {
            type: 'category',
            labels: { step: 1 } //added step
        },
        yAxis: {
            title: {
                enabled: false
            }
        },
        plotOptions: {
            series: {
                animation: false
            }
        },
        series: [{
            data : [
["61.174.51.231",857],
["1.93.32.212",706],
["61.174.51.209",611],
["61.174.51.220",326],
["122.225.109.99",302],
["122.225.109.216",269],
["122.225.109.221",267],
["61.167.49.135",251],
["223.203.195.90",213],
["122.225.109.104",205],
["122.225.109.102",199],
["122.225.109.111",182],
["122.225.109.109",181],
["122.225.109.107",172],
["144.0.0.51",158],
["122.225.109.115",157],
["122.225.109.222",157],
["61.174.51.198",149],
["61.174.51.194",146],
["61.174.51.205",142],
["122.225.109.117",139],
["122.225.109.105",129],
["122.225.109.110",122],
["61.174.51.219",117],
["122.225.109.213",115],
["122.225.109.206",114],
["183.63.52.30",105],
["122.225.109.203",101],
["61.174.51.204",79],
["122.225.109.208",69],
["23.102.67.210",58],
["122.225.109.201",52],
["192.69.94.98",26],
["122.70.133.245",16],
["122.225.109.200",10],
["94.247.101.107",7],
["58.18.172.171",6],
["58.83.146.252",5],
["189.203.240.73",4],
["193.104.41.201",4],
["61.133.211.118",2],
["222.186.21.38",1],
["59.173.13.72",1],
["65.181.118.16",1],
["125.65.245.146",1],
["139.0.12.151",1]
]
        }]
    };

    var chart = new Highcharts.Chart(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:100%; height:100%;"></div>

如何渲染容器轴的所有值？

2 个答案: