Highcharts停止在X轴中进行自动编号

时间:2018-01-15 12:51:20

标签: javascript highcharts char

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

Y轴可能是3或12或20或30点等(inShort动态值,不等于xAxis)

请查看以下屏幕截图。

enter image description here

代码内容: -

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

1 个答案:

答案 0 :(得分:0)

使用slice()将数组长度减少到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) }] });

&#13;
&#13;
#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}
&#13;
<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>
&#13;
{{1}}
&#13;
&#13;
&#13;