Highcharts 停止在 X 轴上自动编号答案

【问题标题】：Highcharts stop auto-numbering in X-AxisHighcharts 停止在 X 轴上自动编号
【发布时间】：2018-06-24 02:36:39
【问题描述】：

我想停止 X 轴上的自动编号，需要在 X 轴上显示 5 个固定值，

而 Y 轴有可能是 3 或 12 或 20 或 30 个点等（inShort 动态值，不等于 xAxis）

请检查以下屏幕截图。

代码内容：-

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

【问题讨论】：

除了这些数字（5、6、7...）之外，您还想显示什么或者只是隐藏它们？

标签： javascript highcharts char

【解决方案1】：

使用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>

【讨论】：

Hello Patat 在您的代码中删除了点，在您的示例中 xAxis 显示了 5 个标签和 5 个点，但我想显示 12 个点。
所以你想用 5 个 X 轴显示尽可能多的 Y 轴点
如果是这种情况那就关注highcharts.com/demo/line-time-series