Тиковая позиция не работает в пулевой диаграмме

Question

Тиковое положение оси X и интервал тиков не работают в сводной диаграмме старшей диаграммы.

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

http://jsfiddle.net/uj2k4bds/50/

Highcharts.setOptions({
    chart: {
        inverted: true,
        marginLeft: 135,
        type: 'bullet'
    },
    title: {
        text: null
    },
    legend: {
        enabled: false
    },
    yAxis: {
        gridLineWidth: 0
    },
    plotOptions: {
        series: {
            pointPadding: 0.25,
            borderWidth: 0,
            color: '#304894',
            targetOptions: {
                    color: '#FFFFFF'
            }
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    }
});


Highcharts.chart('container2', {
    xAxis: {
       categories: ['<span class="hc-cat-title">Cap Utilization</span><br/>%'],
       tickPositions: [0, 25, 50, 75, 100, 125, 150, 175] // added tick position here
    },
    yAxis: {
        plotBands: [{
            from: 0,
            to: 60,
            color: '#FFD700'
        }, {
            from: 60,
            to: 85,
            color: '#90EE90'
        }, {
            from: 85,
            to: 150,
            color: '#FA8072'
        }],
        title: null
    },
    series: [{
        data: [{
            y: 135,
            target: 105,
            tickPositions: [0, 25, 50, 75, 100, 125, 150, 175]
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    }
});

Это мой желаемый результат:

Answer 1

Проблема в том, что вы используете tickPositions на xAxis. В пулевой диаграмме xAxis является вертикальным , а yAxis является горизонтальным . Поэтому, перемещая tickPositions, который вы определили для xAxis в yAxis, он выглядит так, как вы хотите.

Highcharts.setOptions({
    chart: {
        inverted: true,
        marginLeft: 135,
        type: 'bullet'
    },
    title: {
        text: null
    },
    legend: {
        enabled: false
    },
    yAxis: {
        gridLineWidth: 0
    },
    plotOptions: {
        series: {
            pointPadding: 0.25,
            borderWidth: 0,
            color: '#304894',
            targetOptions: {
            		color: '#FFFFFF'
            }
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    }
});

Highcharts.chart('container1', {
    chart: {
        marginTop: 40
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ['<span class="hc-cat-title">EPKM</span>']
    },
    yAxis: {
        plotBands: [{
            from: 0,
            to: 40,
            color: '#FA8072'
        }, {
            from: 40,
            to: 60,
            color: '#FFD700'
        }, {
            from: 60,
            to: 80,
            color: '#90EE90'
        }],
        title: null
    },
    series: [{
        data: [{
            y: 75,
            target: 72
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    }
});

Highcharts.chart('container2', {
    xAxis: {
       categories: ['<span class="hc-cat-title">Cap Utilization</span><br/>%'],
       
    },
    yAxis: {
    tickPositions: [0, 25, 50, 75, 100, 125, 150],
        plotBands: [{
            from: 0,
            to: 60,
            color: '#FFD700'
        }, {
            from: 60,
            to: 85,
            color: '#90EE90'
        }, {
            from: 85,
            to: 150,
            color: '#FA8072'
        }],
        title: null
    },
    series: [{
        data: [{
            y: 135,
            target: 105,
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    }
});


Highcharts.chart('container3', {
    xAxis: {
        categories: ['<span class="hc-cat-title">People Affected</span>']
    },
    yAxis: {
        plotBands: [{
            from: 0,
            to: 1400,
            color: '#FFD700'
        }, {
            from: 1400,
            to: 2000,
            color: '#90EE90'
        }, {
            from: 2000,
            to: 9e9,
            color: '#FA8072'
        }],
        labels: {
            format: '{value}'
        },
        title: null
    },
    series: [{
        data: [{
            y: 1650,
            target: 2100
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    },
    credits: {
        enabled: false
    }
});

#container1 {
    max-width: 800px;
    height: 115px;
    margin: 1em auto;
}
#container2, #container3 {
    max-width: 800px;
    height: 85px;
    margin: 1em auto;
}
.hc-cat-title {
  font-size: 13px;
  font-weight: bold;
  padding: 10px
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

Рабочий пример: http://jsfiddle.net/ewolden/uj2k4bds/64/