highcharts - 刻度位置在高图子弹图中不起作用

Question

X 轴刻度位置和刻度间隔在 highchart 子弹图中不起作用。

下面提到的是相关代码，请检查并让我知道问题。

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/