如何仅采用x轴的类别并删除Highstock图表中不需要的缩放

Question

我想用导航器，范围选择器，y轴从两侧和图形扇区创建条形线图。我使用Highcharts.Chart()实现它，但它的x轴不正确。当我在将类别更改为[“2017-2-3”]之后正确创建x轴时，范围选择器将转到1970（默认值），因此我将日期转换为毫秒。现在在x轴上有不需要的值。我想要仅显示类别数组中显示的x轴值。目前1m，3m，6m未工作我认为这是因为这个x轴问题。

的jsfiddle：http://jsfiddle.net/m05sgk3j/1/

$(document).ready(function() {
    var categories = [1551420000000,1549000800000,1546322400000,1543644000000,1541052000000, 1538373600000, 1535781600000,1533103200000, 1530424800000, 1527832800000, 1525154400000, 1522562400000, 1519884000000, 1517464800000,1514786400000]; 

    new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        title: {
            text: 'In March 2019, the average CT_HOURS is 10.55 hours.'
        },
         rangeSelector: {
            enabled: true,
            buttons: [{
                type: 'millisecond',
                count: 1,
                text: '1m'
            }, {
                type: 'millisecond',
                count: 3,
                text: '3m'
            }, {
                type: 'millisecond',
                count: 6,
                text: '6m'
            }, {
                type: 'all',
                text: 'All'
            }],
            selected: 4,
             inputDateFormat: '%Y-%m-%d',
            inputEditDateFormat: '%Y-%m-%d' 
        }, 
        navigator: {
            enabled: true,
            xAxis: {
                tickInterval: 15,
                labels: {
                   /* formatter: function() {
                        return categories[this.pos]
                    } */
                }
            }
        },
        scrollbar: {
            enabled: true
        },
         xAxis: {


           // categories: categories,
             type: 'datetime',
            tickInterval : 2,
          // tickInterval: {_tickInterval},
                /* labels: {
                         step:10
                       }, */
            /* maxZoom: 30 * 24 * 3600000, */
            dateTimeLabelFormats : {
                    day: '%Y-%m'
                } 
           // crosshair: true,
           // minRange: 1
        }, 
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}h',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'AVERAGE CT_HOURS',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'REQUEST COUNT',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        series: [{
            name: 'REQUEST COUNT',
            type: 'column',
            yAxis: 1,
            data: [
                [1551420000000, 49.9],
                [1549000800000, 71.5],
                [1546322400000, 106.4],
                [1543644000000, 129.2],
                [1541052000000, 144.0],
                [1538373600000, 176.0],
                [1535781600000, 135.6],
                [1533103200000, 148.5],
                [1530424800000, 49.9],
                [1527832800000, 71.5],
                [1525154400000, 106.4],
                [1522562400000, 129.2],
                [1519884000000, 144.0],
                [1517464800000, 176.0],
                [1514786400000, 135.6]
            ],
            tooltip: {
                valueSuffix: ''
            }
        }, {
            name: 'AVERAGE CT_HOURS',
            type: 'spline',
            data: [[1551420000000, 56.6],
                [1549000800000, 46.3],
                [1546322400000, 32.8],
                [1543644000000, 43.4],
                [1541052000000, 40.8],
                [1538373600000, 43.0],
                [1535781600000, 43.1],
                [1533103200000, 44.6],
                [1530424800000, 45.7],
                [1527832800000, 27.8],
                [1525154400000, 39.9],
                [1522562400000, 29.3],
                [1519884000000, 27.9],
                [1517464800000, 27.4],
                [1514786400000, 17.6]],
            tooltip: {
                valueSuffix: 'h'
            }
        }]
    });
});

Answer 1

只需评论tickInterval为xAxis

//tickInterval : 2,

Fiddle

Answer 2

首先，您有未分类的数据。如果要反转数据，请使用reversed选项。

此外，rangeSelector和tickInterval是错误的。如果使用datetime轴，则基本单位为1毫秒。

但是，要仅显示categories数组中的日期，请使用tickPositions选项和formatter函数作为标签：

    xAxis: {
        reversed: true,
        minRange: 1,
        type: 'datetime',
        tickPositions: categories,
        labels: {
            formatter: function() {
                return Highcharts.dateFormat('%Y-%m', this.value);
            }
        }
    },

现场演示：http://jsfiddle.net/BlackLabel/a6Lphq4k/

API参考：

https://api.highcharts.com/highcharts/xAxis.reversed

https://api.highcharts.com/highcharts/xAxis.tickPositions

https://api.highcharts.com/highcharts/xAxis.labels.formatter