Highcharts跨越X轴删除空间(Highcharts Remove Space across

2019-06-25 02:49发布

我试图用Highcharts库来构建区域图。 突然间我看到有在x轴间距一些我的实际数据开始之前。 我想开始向右从[0,0]与适当的数据轴线的曲线图。

<?php 
    $data1 = array(3300, 3000, 4300, 4200, 2900, 1900, 1800); 
?>
<script type="text/javascript">$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'areachart',
        type: 'area'
    },
    title: {
            text: 'People'
    },
    credits: {
        enabled: false
    },
    xAxis: {
        startOnTick: false,
        categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {
        title: {
            text: null
        },
        labels: {
                formatter: function() {
                    return this.value;
                }
        }
    },
    plotOptions: {
        area:{
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        data: [<?php foreach($data1 as $da):
                        echo $da.', ';
                     endforeach;
               ?>
              ]
    }]
});
});
</script>

Answer 1:

因为你正在使用的类别,这是不可能的xAxis 。 对于类别标签和点在类别的中间总是设置。 因此,第一个和最后一个类别有你想要的差距摆脱。
但在这种情况下,它是不是一个错误,这是一个特点。

你可以尝试修改xAxis使用垂直轴和使用自定义标签格式来显示天而不是数字。



Answer 2:

好消息,这是可能的...有一些注意事项。

xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        min:0.5,
        max:10.5,
        tickInterval:1,
        maxPadding:0,
        endOnTick:false,
        startOnTick:false
    }

http://jsfiddle.net/eg9jn/

以下是重要的位:最小值和最大值被设定为0.5的“内部”的图表。 启动/ endOnTick被设置为false。

有一点需要注意:当只有两类这不工作...



文章来源: Highcharts Remove Space across the x-Axis