Высокие диаграммы останавливают автонумерацию в оси X

1

Я хочу остановить автоматическую нумерацию на оси X, нужно отобразить 5 значений, зафиксированных на оси x,

И Y-Axis может быть 3 или 12 или 20 или 30 пунктов и т.д. (InShort динамически значение, не равное xAxis)

Пожалуйста, проверьте снимок экрана для этого.

Изображение 174551

Содержание кода: -

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <style type="text/css">
    #container {
        width: 500px;
        height: 300px;
        margin: 0 auto
    }
    </style>
</head>

<body>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <div id="container"></div>
    <script type="text/javascript">
    Highcharts.chart('container', {

        legend: {
            enabled: false
        },

        chart: {
            backgroundColor: 'white'
        },

        credits: {
            enabled: false
        },

        title: {
            text: '',
            style: {
                fontWeight: 'bold'
            }
        },

        xAxis: {
            lineColor: '#000000',
            categories: ['17 Dec', '24 Dec', '31 Dec', '7 Jan', '14 Jan'],
            labels: {
                style: {
                    color: 'black'
                }
            }
        },

        yAxis: {
            gridLineColor: '#000000',
            title: {
                text: 'Weight (KG)'
            },
            labels: {
                style: {
                    color: 'black'
                }
            }
        },

        series: [{
            name: 'Weight',
            data: [10, 40, 60, 30, 50, 20, 45, 41, 51, 53, 81, 70]
        }]
    });
    </script>
</body>

</html>
  • 0
    Есть ли что-то, что вы хотите показать вместо этих цифр (5, 6, 7 ...) или просто скрыть их?
Теги:
highcharts
char

1 ответ

0

Используйте slice(), чтобы уменьшить длину массива до 5

data: data.slice(0, 5)

var data=[10, 40, 60, 30, 50, 20, 45, 41, 51, 53, 81, 70]
    Highcharts.chart('container', {

        legend: {
            enabled: false
        },

        chart: {
            backgroundColor: 'white'
        },

        credits: {
            enabled: false
        },

        title: {
            text: '',
            style: {
                fontWeight: 'bold'
            }
        },

        xAxis: {
            lineColor: '#000000',
            categories: ['17 Dec', '24 Dec', '31 Dec', '7 Jan', '14 Jan'],
            labels: {
                style: {
                    color: 'black'
                }
            }
        },

        yAxis: {
            gridLineColor: '#000000',
            title: {
                text: 'Weight (KG)'
            },
            labels: {
                style: {
                    color: 'black'
                }
            }
        },

        series: [{
            name: 'Weight',
            data: data.slice(0, 5)
        }]
    });
#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
Поделиться
  • 0
    Здравствуйте, Patat в вашем коде удалил точки, в вашем примере xAxis имеет 5 меток и 5 отображаемых точек, но я хочу отобразить 12 точек.
  • 0
    Таким образом, вы хотите отобразить как можно больше точек оси Y с 5 точками оси X
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню