Вопрос по – Высокие диаграммы удаляют пробел по оси X

3

Я пытаюсь построить граф области с помощью библиотеки Highcharts. Внезапно я вижу, что есть некоторый интервал по оси x, прежде чем мои фактические данные начнутся. Я хочу начать график прямо с оси [0,0] с соответствующими данными.

Charts

<?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>

Ваш Ответ

2   ответа
1

Это невозможно, так как вы используете категории дляxAxis, Метки и точки для категорий всегда устанавливаются в середине категории. Поэтому в первой и последней категории есть пробел, от которого вы хотите избавиться.
Но в этом случае это не ошибка, это особенность.

Вы можете попробовать и изменить свойxAxis использовать обычную ось и использовать пользовательский форматировщик меток для отображения дней вместо чисел.

Люди могут посмотреть на ответ @stackoverflow.com/questions/18593883/… о том, как реализовать предложенное вами исправление. Потому что ничто не лучше, чем копирование и вставка из StackOverflow, чтобы выполнить свою работу!
1

Хорошие новости, это возможно ... с некоторыми оговорками.

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 «внутри». график. start / endOnTick имеют значение false.

Одно предостережение: это не работает, когда есть только две категории ...

Похожие вопросы